How to install Inline Help's Client into your Application

Modified on Thu, 22 Feb, 2024 at 7:32 PM

This guide provides detailed steps on how to install the Inline Help widget into your application, enabling you to offer real-time, context-sensitive support to your users. Whether your application is a traditional multi-page application or a modern single-page application (SPA), we've got you covered.

Prerequisites

Before you begin, ensure you have administrative access to your Inline Help Dashboard. You will need to navigate to the widget installation settings to retrieve your unique JavaScript snippet.

Step 1: Locate Your Installation Snippet

Log in to your Inline Help Dashboard.
Navigate to Site > Settings > Widget > Installation.
Here, you will find a JavaScript snippet unique to your account. Copy this snippet. It will look something like this (note: the following code is an example and will not work for your application):

<script type="text/javascript">
  (function(){"use ...
</script>

Step 2: Embedding the Snippet

Insert the copied JavaScript snippet into the <head> tag of your HTML document. This ensures the Inline Help widget is loaded with your application and is available to users from the start.

Step 3: Identifying Users

To offer a personalized support experience, you can identify the currently logged-in user with their details. This can be achieved by calling InlineHelp.identify method with the user's ID, name and email:

// InlineHelp.identify(userId, traits);
InlineHelp.identify("john.doe", {name: "John Doe", email: "john.doe@example.com"})

Step 4: Handling Single Page Applications (SPAs)

If your application does not fully reload pages as users navigate (common in SPAs), you should ensure the Inline Help widget updates alongside your application's state. This can be done by calling InlineHelp.update() during your application's state changes or route transitions.

Example:

InlineHelp.update();

Conclusion

By following these steps, you can seamlessly integrate the Inline Help widget into your application, offering your users immediate, contextually relevant support directly within your app. For further customization options or troubleshooting, refer to our comprehensive documentation or contact our support team.