⚠️ 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.

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 domainName = "MY_DOMAIN_NAME";
 const alias = "MY_ALIAS";
 const defaultAlias = "MY_DEFAULT_ALIAS";
 const divId = "MY_DIV_ID";

 const loadWidget = (alias) => {
  const script = document.createElement("script");
  script.src = `https://${domainName}/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 :

MY_ALIAS
MY_DOMAIN_NAME
MY_DEFAULT_ALIAS
MY_DIV_ID

MY_DOMAIN_NAME is replaced by your JOIN domain name, which you can easily find in the script for one of your widgets.

MY_DEFAULT_ALIAS must replaced by the alias of the widget to be displayed if no widget has been created for the page.

MY_DIV_ID must be replaced by the id of the div copied in the initial code.

MY_ALIAS must be replaced by a unique identifier for the page, such as its slug.

Any identifier will do. We recommend using the slug because it's easier for the person creating the content to retrieve it afterwards.

Once the code has been integrated, all you have to do is create a new widget using the page identifier as an alias for the 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.

The widget will appear on your web page as soon as you publish it.