Learn how to embed eko videos on your WooCommerce storefront
Overview
Once you’ve created your customer-led experience, it’s time to let your shoppers interact with it! Follow these simple steps to embed your eko project on your WooCommerce storefront.
Just remember: to embed your project on your storefront, your eko account needs to be integrated with your WooCommerce account. To go to our guide for integrating your WooCommerce store with eko, please click here.
How to embed your eko video
- In the Editor page of your project (the page with the tree view of the interactive video), go to the left-hand sidebar and click on the globe icon.
- Next, a small window will appear with the Publish Settings. Click on the tab titled, “</> Embed Settings.”
- Under the Embed Settings, scroll to “Type” and select “Embed.”
If you’d like to publish your project in a pop-up window, please see our guide here.
- Now it’s time to publish your project! To close the Publish Settings, click on any blank space in the Editor. Then, click the “Publish” button at the top right-hand corner of your screen.
- Next, the Publish Manager should open. Copy the embed code under “Embed Code Snippet” to your clipboard. You can easily copy it to your clipboard by clicking on the clipboard icon (marked in red in the screenshot below).
- Once copied, paste your project’s embed code snippet into your WooCommerce shop, in the product description section text field, or on any page in the custom HTML block.
- Add <div> around the embed code snippet. For example: <div><script async src="https://play.eko.com/embed/v1.js?id=YsQGcoqKqf"</script>></div>. Please note that if you chose to publish the eko video as a pop-up as seen in Step 3, there is no need for Step 5, and you can paste the eko code snippet without a div wrapper.
- Done! You can now visit the page you chose and interact with the embedded eko experience on your site.
