This guide explains how to integrate our video widgets into your SFCC store. It will enable you to showcase short videos, such as UGC, tutorials, and explainers, using formats like stories, carousels, floating widgets, and more.
Step 1: Add the Vidjet script to SFCC head (10 min)
A. Via Business Manager (head markup)
Login to Business Manager → Merchant Tools → Content → Library → Locales & Head Markup.
Open Head Markup for your site.
Paste your Vidjet
<script>snippet into the Edit Head Markup field.Save & Clear Cache.
This ensures Vidjet loads on all pages via the<head>tag.
B. Via SFRA cartridge (code-level)
In your custom cartridge, create a hook or controller to inject the script.
In
htmlHead.isml, use the SFRA assets helper:jsCopyEditvar assets = require('*/cartridge/scripts/assets'); assets.addJs('/js/vidjet-init.js');Or load dynamically in your ISML head template:
htmlCopyEdit<script src="https://cdn.vidjet.com/your-script.js"></script>
Deploy cartridge and clear cache.
💡 C) Alternative: you can also integrate our script via Google Tag Manager.
Step 2: Embed a widget in the product page template (15 min)
Now, it’s time to embed your first widget into the product page layout.
1. In the Vidjet dashboard
Click 'Create Widget' and follow the setup process (choose widget type, select videos, and set display rules)
2. Copy the widget's code
Once created, Vidjet will give you an embed code.
C. Embed widget in Product Detail ISML
Log in to your SFCC Admin Panel and access the SFRA templates: product/productDetails.isml
On this file, insert the widget code:
In chosen ISML template, add after
<isreplace>or near image block:htmlCopyEdit <div class="vidjet-carousel-wrapper" style="position: relative; overflow: hidden; height: 140px; margin: 0px auto;"> <iframe class="vidjet-embed-iframe" data-vidjet-campaign-id="fd89a962-de6e-4e5c-a5d2-94efcebb1190" src="https://player.vidjet.io/fd89a962-de6e-4e5c-a5d2-94efcebb1190" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allow="clipboard-read; clipboard-write; fullscreen" frameborder="0"> </iframe> </div><script id="vidjet" src="https://media.vidjet.io/client-app.js"></script>
Use SFRA assets helper if required:
jsCopyEditvar assets = require('*/cartridge/scripts/assets'); assets.addJs('/js/vidjet-widget-init.js');Save cartridge files, redeploy, and clear cache.
Step 3 : Sync product feed (15 min - optional)
To link your videos to specific products, you need to sync your product catalog with Vidjet.
Export your product feed from your PIM or other tools, such as Google Merchant Center, in one of these formats: XML, CSV, or JSON.
Send it to leo@vidjet.io, and he will integrate it for you, making sure the data is correctly structured.
Leo will email you once done. You will be able to see the following view:
If you need help during integration, our team is here to assist you via live chat or at contact@vidjet.io.