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.