To embed Producers Market StoryBird™ product profiles on your website there are 4 embed solutions, referenced by unique source URLs. If embeds are enabled for your products you can choose from:
Button Embed – Renders a branded button design to link to your Journey. The button can be positioned anywhere on your site and will link to your StoryBird product profile when used.
Map Embed – Displays a map of your products' supply chain journey.
Steps Embed – Displays the event lists with images and text descriptions of your supply chain.
Full Embed – Displays a dynamic map that scrolls and animates in combination with your events list and text descriptions of your supply chain. This embed gives your clients the best StoryBird experience but requires the most space.
Full Swap Embed – Like Full Embed, but the map is left, and the supply chain is right.
Shopify Integration
To display StoryBird modules in iframe embeds on a Shopify site with Liquid templates you need to follow these instructions.
Copy storybird-embed.liquid into your snippets directory.
Copy custom.css from the link into your assets directory and link it to the
theme.liquidfile to support responsive iframes:<link rel="stylesheet" href="{{ 'custom.css' | asset_url }}">Add a div container with a unique id in your template or the contents of your page (set
min-heightas needed):<div id="storybird-embed-steps" style="--aspect-ratio: 16/9; min-height: 240px;"></div>
Add this code to your template for each embed (each embed needs a unique
containerId):{%assign containerId = 'storybird-embed-steps'%}
{%assign partToEmbed = 'steps'%}
{%assign storybirdStory = 'unique-story-id'%}
{%assign blockchainUrlParameter = 'vid'%}
{%include 'storybird-embed' with id:containerId, part:partToEmbed, story:storybirdStory, urlParam:blockchainUrlParameter%}
For a detailed example see example.liquid. For an implementation detail on how to use multiple embeds on the same page see example-multiple-embeds.liquid.
The current technical implementation is done via the iframe element and can be copy-pasted into any WYSIWYG editor, CMS or even manually added to your website source code.
Still have questions? Reach out to our product team via [email protected]om