Classic integration

👩‍💻 Tutorial video

1. Access the Integration Tab

Navigate to the 'Integration' tab from your widget details.

2. Copy the widget code.

Click on the 'Copy' button to copy the widget code.

You need to publish your widget once before you can access the integration code.

3. Paste the integration code onto your website.

After copying the code of your widget, paste it directly at the desired location in your website's code.

You have the option to modify the appearance of your widget, such as color, borders, and covers, from the 'Settings' tab.

Click on the 'Publish' button to update your changes directly on your site.

If you want to change the type of the widget (sticky, standalone, embed...), you will need to create a new widget.

For more advanced integration, you can separate the script from the div and paste the script into the head of your site.

Then all you have to do is paste the div where you want it.

Dynamic integration (product pages, collections...)

Please note that this type of integration requires a developer.

What is the unique 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?

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.

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_DOMAIN_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.