Beacon Embedded Articles

Embedded Articles allow you to open a Docs Article via any link or button in your web-based app or website, where ever you may need it. There are four different attributes you can choose from to open the article in a Beacon, popover, sidebar, or modal.

Here are some examples of when you might use Embedded Articles:

Surface a specific article in a sidebar to highlight a useful tutorial.
Provide relevant tooltips in a modal to help your customers better understand a feature.
Display a quick definition in a popover to provide inline clarification in your app.

Types of Data Attributes

Use the data-beacon-article attribute to open the article in Beacon, just normal style.
Use the data-beacon-article-inline attribute to open the article in an inline popover.
Use the data-beacon-article-sidebar attribute to open the article in a sidebar.
Use the data-beacon-article-modal attribute to open the article in a modal.

Set Up Embedded Articles

1

To get started with Embedded Articles, you must have a Beacon embedded on your site. Not there yet? Check out our how-to guide to get started with Beacon: Create a New Beacon

Note: Setting up Embedded Articles does take some familiarity with our Beacon JavaScript API. Please work with your web developer to implement these steps.

2

Once you've created and embedded a Beacon on your website, choose from one of four choices for Embedded Articles. Copy the HTML reference snippet of your choice, and plug in the Article ID.

<!-- Open Article in Beacon -->
<a href="#" data-beacon-article="ARTICLE_ID"></a>

<!-- Open Article in a popover -->
<a href="#" data-beacon-article-inline="ARTICLE_ID"></a>

<!-- Open Article in a sidebar -->
<a href="#" data-beacon-article-sidebar="ARTICLE_ID"></a>

<!-- Open Article in a modal -->
<a href="#" data-beacon-article-modal="ARTICLE_ID"></a>

You can find the Article ID in the editor URL for that article.

3

Head back to your site and add the HTML reference to any button or linked text you want to display your article.