Put your supodo events on your own website

How to add the events widget to WordPress, Jimdo, Wix or a plain HTML page.

What the widget is

The widget shows your organisation's events right on your own website, as a list that keeps itself up to date. You keep managing your events in supodo manager and never have to enter them twice.

Good to know:

  • It shows published events only. Drafts stay hidden.
  • It sets no cookies.
  • Clicking an event asks first, then opens supodo in a new tab. Your website stays open.
  • Changes you make in the manager – to events or to the list of allowed websites – reach the widget within a minute.

Create the widget in the manager

  1. In supodo manager, open your organisation, choose “Websites” in the sidebar and go to “Embed on your website”.
  2. Choose which events the widget shows: all upcoming events of your organisation, or events you pick one by one.
  3. Choose the language and reading level, how many events appear, one of two templates (“Timeline” or “List”), and if you like your own colours for background, text and accent. The manager does not accept colours that are hard to read together.
  4. List the websites that may show the widget (more on this under “Allowed websites”).
  5. Copy the code and paste it into your website. The guides below show how.

The code looks roughly like this:

<iframe src="https://app.supodo.com/embed/WIDGET-ID" title="Events by Musterstadt Sport" style="width:100%;height:600px;border:0" loading="lazy"></iframe>

There is also a second, optional line. With it, the widget grows to fit its content instead of scrolling inside:

<script src="https://app.supodo.com/embed.js" async></script>

Always copy the code from the manager: it already has your widget's ID where this example says WIDGET-ID.

Allowed websites

The widget appears only on websites you list in the manager. On any other website the browser shows a blank area or an error message instead. That way you decide on which websites the widget can be embedded. Your published events are public on supodo either way.

When you add a website:

  • Enter the address exactly as it appears at the top of the browser when someone opens your website – for example https://musterstadt-sport.de.
  • To the browser, https://musterstadt-sport.de and https://www.musterstadt-sport.de are two different websites. If your website answers on both addresses, add both.
  • Only https:// addresses work. A website still served over http:// cannot show the widget.
  • An address you add or remove takes effect within a minute.

Privacy on your website

When someone opens a page with the widget, their browser loads the widget from supodo. For technical reasons this sends their IP address to supodo. Mention this in your website’s privacy policy, for example like this:

On this page we show our events with an embedded widget from the supodo platform. When you open the page, your browser loads the widget from supodo’s servers and, for technical reasons, sends your IP address and information about your browser. The widget sets no cookies. The legal basis is Art. 6(1)(f) GDPR; our legitimate interest is showing our current events on our website. How supodo processes this data is described in supodo’s privacy policy: https://supodo.com/en/privacy-policy#public-display

Adding the code, step by step

WordPress (self-hosted)

  1. In the block editor, open the page where the events should appear.
  2. Add a “Custom HTML” block. The quickest way is to type /html on an empty line and press Enter.
  3. Paste the code you copied into the block – and, if you like, the second line right below it.
  4. Check the result in the preview. The widget only appears there if your website's address is listed in the manager.
  5. Save or publish the page.

Important: only Administrators and Editors may paste this kind of code – on a WordPress network (multisite), only Super Admins. For every other role, WordPress removes the code when you save.

WordPress.com

On WordPress.com it depends on your plan. According to WordPress.com, this kind of code works on every paid plan (Personal, Premium, Business and Commerce) once hosting features are activated. Installing a plugin is enough to activate them, for example. On the Commerce plan they are active from the start.

On the free plan, WordPress.com removes this code when you save. You can then move to a paid plan, or link to your organisation's page on supodo instead of using the widget.

The steps themselves are the same as for WordPress above.

Jimdo

These steps are for Jimdo Creator. Not every Jimdo plan or editor allows your own code – check your plan.

  1. Open your website and click “Edit”.
  2. Where the widget should go, click “Add Element” › “More elements and Add-ons” and choose the “Widget/HTML” element.
  3. Paste the code and click “Save”. Reload the page if the widget does not appear straight away.

Wix

Wix always places embedded content in a frame of its own. So use only the widget's address, not the whole code.

  1. In the editor, click “Add Elements” › “Embed Code” › “Popular Embeds” and choose “Embed a site”.
  2. As the website address, enter the address from your code: the part after src= inside the quotation marks, so https://app.supodo.com/embed/WIDGET-ID.
  3. Drag the frame to the height you need. The second line for automatic height does not work on Wix.
  4. Publish the page. In the manager, list the address your Wix website is reached at.

Plain HTML

  1. Paste the code into the body of your page, at the spot where the events should appear.
  2. If you like, paste the second line right below it.
  3. Upload the page to your server and open it over https://.

The title matters for screen readers

The code contains a title (title="…"). Screen readers read it out when someone reaches the widget, so blind and partially sighted people know what the frame contains. Keep the title in the code. You may change it if another name suits your page better, but do not delete it.

Troubleshooting

The widget stays blank or shows an error

  • Is your website's address listed in the manager – exactly as it appears in the browser?
  • Does your website run on https://? The widget does not appear on http://.
  • Is the version with or without www. missing? Add both.
  • Did you just change something? Wait a minute and reload the page.

The widget shows a scrollbar

The widget starts with a fixed height. Paste the second line from the manager below the code, and it grows to fit its content. You can also change the height in the code (height:600px). On Wix, drag the frame taller instead.

The code disappears when I save

Then your website does not allow your own code in that place. On WordPress this is usually your role, on WordPress.com your plan – see the notes above.

Still stuck? Write to us through the contact form.