Integrating "Explain This" with Your Application without the Widget Launcher

Modified on Thu, 22 Feb, 2024 at 3:44 PM

Inline Help's "Explain This" feature is a powerful tool designed to enhance your application's user experience by offering contextual help and explanations directly within your app. By integrating "Explain This," you can provide your users with immediate access to help content without navigating away from their current task. This article guides you through hiding the default widget and integrating "Explain This" through a custom link or button within your application.

Hiding the Default Widget Launcher

To maintain the aesthetics of your application and ensure a seamless user experience, you might prefer to hide the Inline Help's widget and instead use a custom button. Follow these steps to hide the widget launcher:

Access the Inline Help Site's settings in your dashboard.
Navigate to the "Widget > Design & Language" section.
Locate the "Launcher" options.
Uncheck "Enable Launcher" to disable the default widget launcher display in your application.

With the widget hidden, you can now proceed to integrate "Explain This" more naturally within your app's interface.

Integrating "Explain This" via a Link or Button

Integrating "Explain This" functionality can be achieved by embedding a JavaScript call within a link or button in your application. This approach allows you to offer contextual help matching your UI.

Step 1: Prepare the JavaScript Call

Inline Help provides a JavaScript function that can be called to trigger the "Explain This" feature programmatically. The function looks like this:

window.InlineHelp.explainThis();

Step 2: Embed the Call in a Link or Button

Choose where you want to place the link or button within your application. Embed the JavaScript call within an onclick event listener of a link or button. Here's an example using a button:

<button onclick="window.InlineHelp.explainThis()">Need Help?</button>

Or, if you prefer using a link:

<a href="#" onclick="InlineHelp.explainThis(); return false;">Explain This</a>

Step 3: Customize the Appearance

Customize the appearance of your link or button using CSS to ensure it aligns with your application's design. You can style it to stand out or blend in, depending on how prominent you wish the help option to be.
Conclusion

By following these steps, you can integrate Inline Help's "Explain This" feature into your application in a way that feels natural and intuitive for your users. This customized approach allows you to maintain control over the application's design while still providing essential help resources to your users.

For further assistance or questions about integrating "Explain This," please contact our support team.