Please note that this type of integration requires a developer.

What is a dynamic widget integration?

Dynamic integration allows different widgets to be displayed on different pages via one single integration on the page template.

This means you can edit your own content directly from the JOIN tool.

The code must be integrated into all the product pages where you want the widget to appear, in the location that has been agreed with your team.

How does it work?

The code must be integrated into all the product pages where you want the widget to appear, in the location that has been agreed with your team.

Please note that all widgets will need to have the same shape and size. To avoid CLS, start from the default widget script.

In the widget integration tab, retrieve the widget integration code.
Edit the last script tag to replace it with the following code :

<script>
const teamName = "MY_TEAM_NAME"; // ASK CSM
const defaultAlias = "MY_DEFAULT_ALIAS";
const divId = "MY_DIV_ID";
// BELOW THE CODE TO RETRIEVE THE SLUG AS ALIAS
const currentPath = window.location.pathname; 
const pageSlug = currentPath.substring(currentPath.lastIndexOf("/")+1);
const alias = pageSlug; 

const loadWidget = (alias) => {
const script = document.createElement("script");
script.src = `https://${teamName}.my.join- stories.com/widgets/${alias}/index.js`;
script.setAttribute("data-join-widget-id", divId);
script.setAttribute("data-join-widget-alias", alias);
script.setAttribute("type", "text/javascript");
script.onerror = () => {
if (defaultAlias && alias !== defaultAlias) {
loadWidget(defaultAlias);
}
}
const div = document.getElementById(divId);
if (div) { div.appendChild(script); }
}

loadWidget(alias);
</script>

In the code provided, you will have to replace several values :

MY_TEAM_NAME	You can get it from your CSM.
MY_DEFAULT_ALIAS	Must be replaced with the widget’s alias that should be displayed if no widget has been created in the Studio for the respective page.
MY_DIV_ID	Must be replaced with the ID of the div copied from the initial code. (see screenshot below)
MY_ALIAS	By default, we retrieve the slug from your URL.

Screenshot to retrieve your MY_DIV_ID

The alias must be a unique identifier for the page. By default, we use your page’s slug.

Although you can use any identifier, we recommend opting for the slug. Indeed, the slug is easier to retrieve for the person in charge of content creation, which simplifies the management and maintenance of your widgets.

After integrating the code, you only need to create a new widget using the page’s identifier as the widget’s alias.

In our example, the alias “chaussure” is used to identify the corresponding widget.

Remember to re-use the same widget shapes and sizes to avoid CLS. You can duplicate an existing widget to ensure that the design is the same.

Once your widget is published, it will automatically appear on the site.