Embed your Help Content on a webpage

You can embed your Help Center on any webpage using the Help widget. This lets you directly open your Help Center articles, categories, and collections directly within the webpage.

Here is what that looks like:

How to set up the Help widget

1. Install the Engage JS SDK. Copy and paste the code just before the closing </body> tag of your web page.

<script>
!function(n){if(!window.Engage){window[n]=window[n]||{},window[n].queue=window[n].queue||[],window.Engage=window.Engage||{};for(var e=["init","identify","addAttribute","track"],i=0;i<e.length;i++)window.Engage[e[i]]=w(e[i]);var d=document.createElement("script");d.src="//d2969mkc0xw38n.cloudfront.net/next/engage.min.js",d.async=!0,document.head.appendChild(d)}function w(e){return function(){window[n].queue.push([e].concat([].slice.call(arguments)))}}}("engage");
Engage.init('api_key')
</script>

2. Initialize the SDK with your API key. You can find your public API key in Settings → Account on your Engage dashboard. (Replace api_key in the code above with your public API key)

<script>
...
Engage.init('api_key')
</script>

3. Add a data-help-id attribute to every link tag that should open a Help Content like this: <a href="https://docs.engage.so/en-us/a/62bbddb45bfea4dca4834059-what-is-a-segment" data-help-id="62bbddb45bfea4dca4834059">Learn more about Customer Segmentation</a>.
   The value of the data-help-id attribute should be set to the ID of the article you want to open. To get an articles ID, go to your Engage dashboard → Help Center → Articles → (Scroll to the article and click on View) → Copy ID

4. Instead of adding the data-help attributes, you can manually open a help article/category/collection via the widget. This is also useful if you are building a SPA and the content is not rendered by the time the library is loaded.

Engage.openHelp('id', 'help-type', 'locale')

• id is the article, category or collection type

• help-type - By default, when you pass an id to the openHelp method, it is assumed you want to open an article. If however the id is for a category or collection, you can use this to specify which. The value can be category (if you want to open a category page) or collection (if you want to open a collection page). Optional.

• locale - By default, the content is opened in your default Help Center language. If you want to open the content in a different language you have set up for your Help Center, you can use this to set the locale. Optional.

How it works

When the Engage JS SDK is loaded, it checks the page for all links (<a> tags) with the data-help-id attribute and prevents the default action (redirecting to the href value) when clicked. Instead, it opens the article (category or collection) with the data-help-id ID in the widget.

To ensure your link work if the SDK is yet to fully load when clicked or if the SDK could not properly load (if JavaScript is blocked for example), we recommend you set the href attribute to the URL of the desired Help content. This ensures the link still opens the content (preferably in a new tab) if for any reason the SDK is not available or yet to fully load.

Attributes reference

Here are the supported attributes you add to your links (<a> tags) to open the Help widget:

• data-help-id - The ID of the Article, Category, or Collection you want to open. To get the ID of a Category or Collection (this also works for Articles), open the Help Center page and copy the page's URL from the address bar. The first 24 characters of the last / in the URL is the ID. For example, if the URL is https://docs.engage.so/en-us/c/633f7f69cb7f4bdb44b1abff-help-center, the ID is 633f7f69cb7f4bdb44b1abff

• data-help-type - If the data-help-id value is for a Category or Collection, you can use the data-help-type to specify which it is. Values can be category or collection. If this is not specified, it is assumed the content is an Article.

• data-help-locale - By default, the content is opened in your default Help Center language. If you want to open the content in a different language you have set up for your Help Center, you can use this to set the locale. Example: <a href="https://docs.engage.so/en-us/a/62bbdc0c5bfea4dca4834033-engage-overview" data-help-id="62bbdc0c5bfea4dca4834033" data-help-locale="en-gb">Engage overview article</a>

Example: using data attribute

Check the <a href="https://docs.engage.so/en-us/a/62bbdc0c5bfea4dca4834033-engage-overview" data-help-id="62bbdc0c5bfea4dca4834033">Engage overview article</a>,
the <a href="https://docs.engage.so/en-us/c/62bb21d5e41842a785267cff-segments" data-help-id="62bb21d5e41842a785267cff" data-help-type="category">Segments category</a>
and finally the <a href="https://docs.engage.so/en-us/c/62bb20dbe41842a7852526f2-integrations" data-help-id="62bb20dbe41842a7852526f2" data-help-type="collection">integrations collection</a>

Example: manual call

Check the <a href="https://docs.engage.so/en-us/a/62bbdc0c5bfea4dca4834033-engage-overview" onclick="Engage.openHelp('62bbdc0c5bfea4dca4834033')">Engage overview article</a>,
the <a href="https://docs.engage.so/en-us/c/62bb21d5e41842a785267cff-segments" onclick="Engage.openHelp('62bb21d5e41842a785267cff', 'category')">Segments category</a>
and finally the <a href="https://docs.engage.so/en-us/c/62bb20dbe41842a7852526f2-integrations" onclick="Engage.openHelp('62bb20dbe41842a7852526f2', 'collection')">integrations collection</a>