How do I embed stories in my own site?

An alternative for OnVoard hosted stories page is embedding stories in your own site.

Before you begin

  • Ensure that you have created a story site and added stories. This is required since content from embed stories will be fetched from the linked story site.
  • Check that you are in Standard Plan or above. This is required in order to make embed stories available for display.

Setting up Embed Story

Go to embed stories page and add a new embed.

Embed Story URLs

To embed stories on your site, you need to provide OnVoard with details on url structure in order for us to generate links for content.
  • Main Url - This is the page that will showcase available stories. Content shown will be similar to story collection page.
  • Article Base Url - This is the base url for individual story articles. OnVoard will automatically append query string ov_story_id=<YOUR_STORY_ID> to article base url. The added url parameter is used to determine the story article to load. If left empty, we will link story articles to OnVoard hosted url.

Get Embed Story Snippet

After creating an embed story, go to embed stories page and locate the newly added embed. Click on options icon and select Show Code Snippet.

Add <div id="ov_embed_story"></div> to the section where you want content to display. Then copy code snippet and paste it before the </body> tag of page.

Example

Urger Burgers wants to use embed story to host their own customer stories page.
Here's the setup:
  • Main Url set to https://customers.urgerburgers.com
  • Article Base Url set to https://customers.urgerburgers.com/stories

Assuming that Urger Burgers has setup everything correctly and added required code snippet. Visiting https://customers.urgerburgers.com will display the page embedded with story collection component. Links to each story article will be something like:

  • https://customers.urgerburgers.com/stories?ov_story_id=100
  • https://customers.urgerburgers.com/stories?ov_story_id=101
  • https://customers.urgerburgers.com/stories?ov_story_id=102
Having ov_story_id as url parameter is mandatory since OnVoard use it to identify which story article to load.

Visiting https://customers.urgerburgers.com/stories?ov_story_id=100 will display the page embedded with story article component.

Now let's say that we set Article Base Url to empty, links to story article will instead be directed to OnVoard hosted url.

  • https://onvoard.io/stories/urgerburgers/storya
  • https://onvoard.io/stories/urgerburgers/storyb
  • https://onvoard.io/stories/urgerburgers/storyc