Classic integration

1 - Go to the Integration tab on your widget configuration page.

2 - Copy the widget code using the Copy button.

3 - Paste directly into the code of your site.

4 - You can then edit the border color, labels...directly from the Settings tab.

If you want to change the type of widget (multiple stories, sticky...), you'll 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

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