Skip to main content

How does the integration with Jimdo work?

Magdalena Contiu
  • Updated

This article explains how to add Regiondo widgets to a Jimdo website and how to customize their design with CSS.

 

1. Why the standard widget code needs a change

  • The code from the Regiondo Widget Editor has two parts:
    • Custom HTML element: defines the widget and its unique widget ID.
    • JavaScript loader: loads and initializes the widget.
  • The Jimdo editor removes unsupported HTML elements, such as <product-catalog-widget>, when the code is saved or published. It keeps the JavaScript loader.
  • As a result, the JavaScript file loads, but the widget can’t be displayed because its HTML element is missing.

 

Example of the standard Catalog Widget code:

<product-catalog-widget widget-id="b1af74e1-cc6a-4b5f-ace4-324a0bd80d4e"></product-catalog-widget>

<script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

 

2. Add the widget to your Jimdo website

If the website editor allows JavaScript but removes custom HTML elements, the widget element can be created with document.write(). Instead of pasting the custom widget element directly into the HTML editor, wrap it in a standard <script> tag. The JavaScript loader stays the same.

  • Copy the code for your widget type.
  • Replace INSERT WIDGET ID HERE with the actual widget ID generated in the Regiondo Dashboard.
  • Paste the code into the HTML editor of your Jimdo website, where the widget should appear.

Important: 

  • For each widget type, the HTML element and the JavaScript loader stay the same. Only replace the widget ID.

  • If the widget doesn’t display after you’ve added the code, contact our support team.

 

2.1. Catalog Widget

<script type="text/javascript">
document.write('<product-catalog-widget widget-id="INSERT WIDGET ID HERE"></product-catalog-widget>');
</script>

<script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

2.2. Product Widget

<script type="text/javascript">
document.write('<product-details-widget widget-id="INSERT WIDGET ID HERE"></product-details-widget>');
</script>

<script type="text/javascript" src="https://widgets.regiondo.net/product/v1/product-widget.min.js"></script>

2.3. Booking Widget

<script type="text/javascript">
document.write('<booking-widget widget-id="INSERT WIDGET ID HERE"></booking-widget>');
</script>

<script type="text/javascript" src="https://widgets.regiondo.net/booking/v1/booking-widget.min.js"></script>

2.4. Button Widget

<script type="text/javascript">
document.write('<button-widget widget-id="INSERT WIDGET ID HERE"></button-widget>');
</script>

<script type="text/javascript" src="https://widgets.regiondo.net/button/v1/button-widget.min.js"></script>

 

3. How the workaround works

  • Jimdo keeps the standard <script> element, because it isn’t an unsupported tag.
  • While the page loads, document.write() creates the Regiondo widget element.
  • The Regiondo JavaScript loader finds that element and displays the widget.

Note: document.write() must run while the page first loads. It doesn’t work if the website builder delays scripts or runs them after the page has loaded.

 

4. Customize the widget design with CSS

  • The Regiondo Catalog and Product widgets use Shadow DOM, which keeps their design separate from the rest of your website.
  • CSS rules in your website’s regular stylesheet can’t change the widget’s appearance.
  • To apply custom CSS, the widget must reference a style template with the styles-template-id attribute.
  • The <template> and <style> elements are also HTML tags, so Jimdo may remove them just like the widget element. The CSS template must therefore be placed inside document.write() together with the widget element.

4.1. Catalog Widget example with custom CSS

This example customizes the Catalog Widget:

  • Booking buttons are black with white text.
  • Product titles are red.
  • The catalog background stays transparent.
<script type="text/javascript">
document.write(`
  <template id="product-catalog-widget-styles">
    <style>
      .regiondo-list-product-button {
        background-color: black !important;
        color: white !important;
      }

      .regiondo-list-product-header {
        color: red !important;
      }

      .regiondo-catalog {
        background-color: transparent !important;
      }
    </style>
  </template>

  <product-catalog-widget
    styles-template-id="product-catalog-widget-styles"
    widget-id="INSERT WIDGET ID HERE">
  </product-catalog-widget>
`);
</script>

<script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>

4.2. How the CSS template works

  • document.write() creates both the CSS template and the Catalog Widget element.
  • <template id="product-catalog-widget-styles"> contains the CSS rules for the widget.
  • styles-template-id="product-catalog-widget-styles" connects the widget to the CSS template.
  • The JavaScript loader displays the widget and applies the styles from the template.
  • You can change the CSS rules to get the look you want.

Important:

  • A <style> element on its own isn’t enough to style the widget. The matching styles-template-id attribute is required.
  • The CSS selectors must match elements that exist in the widget.
  • Only include the CSS rules you actually need. Old or unused CSS from earlier customization attempts can cause unwanted changes.
  • For help with custom styling, contact our support team.

 

 

Related articles

Related articles