All Collections
Integrations
Advanced integration with generic widget on product pages
Advanced integration with generic widget on product pages
Nicolas Goudemant avatar
Written by Nicolas Goudemant
Updated over a week ago

❗️ ⚠ Beware, this type of integration requires a developer with access to the templates of the site's pages. ⚠️

What is a dynamic widget integration?

This allows you to do only one integration for all product pages, by pasting a small piece of code directly into the product page template.

This allows you to be autonomous in adding widgets to pages determined by the integration.

Integrate the piece of code on all the product pages of the site, at the location that has been validated with your team.

To avoid CLS, select the right script corresponding to the format you want :

Bubble format :

<div id="join-widget-{{DYNAMIC_ALIAS}}" style="display:block;"></div> <style> #join-widget-{{DYNAMIC_ALIAS}} { margin: 5px 2px; min-height: 114px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-{{DYNAMIC_ALIAS}} { min-height: 132px; } } </style> <script src="https://workspaceID.my.join-stories.com/widgets/{{DYNAMIC_ALIAS}}/index.js" data-join-widget-id="join-widget-{{DYNAMIC_ALIAS}}" data-join-widget-alias="{{DYNAMIC_ALIAS}}" type="text/javascript" ></script>

Cards format :

<div id="join-widget-{{DYNAMIC_ALIAS}}" style="display:block;"></div> <style> #join-widget-{{DYNAMIC_ALIAS}} { margin: 5px 2px; min-height: 225.44px; width: 100%; } @media (min-aspect-ratio: 3/4) { #join-widget-{{DYNAMIC_ALIAS}} { min-height: 283px; } } </style> <script src="https://workspaceID.my.join-stories.com/widgets/{{DYNAMIC_ALIAS}}/index.js" data-join-widget-id="join-widget-{{DYNAMIC_ALIAS}}" data-join-widget-alias="{{DYNAMIC_ALIAS}}" type="text/javascript" ></script> 

In the code provided, DYNAMIC_ALIAS must be replaced by a unique part retrieved dynamically from the page.

For example the name of the product, its id, the end of the url of the page etc. (This can be done very easily in JS or other by a developer).

You will also need to replace workspaceID.my.join-stories.com/ with your JOIN domain name which you can easily find in the script of one of your widget.

Just make sure that the DYNAMIC_ALIAS chosen is easy to identify for the person who will create the Stories and widgets at JOIN (end of the url, product name, product id etc.)

For example, for the product page domainname.com/products/conditioner-lavender the DYNAMIC_ALIAS could be: conditioner-lavender

Then, the person who creates a widget on the JOIN interface can simply name the alias of his widget in the same way as the DYNAMIC_ALIAS to match the desired page.

As soon as the widget is created and with stories, it will appear on the site.


❗️Please Notice: When this code is integrated on all the product pages, it uses the format you have chosen on the JOIN tool, which is why we advise you to use the same type of widget. The stories will be placed in the same place on the product pages.

Did this answer your question?