Put your supodo events on your own website

This page shows how to put your events on your website. With WordPress, Jimdo, Wix or HTML.

What the widget is

The widget is a list of your events. The list sits on your own website. It updates by itself. You only add your events in supodo manager.

Good to know:

  • The widget only shows published events. It does not show drafts.
  • The widget sets no cookies.
  • When someone clicks an event, a question comes first. Then supodo opens in a new tab. Your website stays open.
  • When you change something in the manager, the widget shows it within 1 minute.

Create the widget in the manager

  1. Go to supodo manager. Open your organisation. Choose “Websites” in the menu. There you will find “Embed on your website”.
  2. Choose the events. You have 2 options. 1: All upcoming events. 2: Only events you pick yourself.
  3. Choose the language and the text version. Choose how many events to show. Choose a template: “Timeline” or “List”. You can also choose your own colours. The colours must be easy to read.
  4. Add the websites that may show the widget. You can read more below, under “Allowed websites”.
  5. Copy the code. Paste it into your website. The steps for this are below.

The code is a short text for your website. It looks about 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 line. You do not have to use it. With this line, the widget grows to fit its content. Then nobody has to scroll inside the widget.

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

Always copy the code from the manager. It already has the right ID for your widget. This example only says WIDGET-ID.

Allowed websites

The widget only shows on websites you add in the manager. On other websites it stays blank. Or the browser shows an error. This way, you decide where people see your events.

Keep this in mind:

  • Write the address the way it looks at the top of the browser. For example: https://musterstadt-sport.de
  • For the browser, https://musterstadt-sport.de and https://www.musterstadt-sport.de are 2 different websites. Does your website work with both addresses? Then add both.
  • The address must start with https://. It does not work with http://.
  • You add or delete an address? This works within 1 minute.

Privacy on your website

Someone opens a page with the widget. Then their browser loads the widget from supodo. This sends their IP address to supodo. Your website’s privacy policy must say this. You can use this text:

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

How to add the code

WordPress (self-hosted)

  1. Open the page in the block editor. This is the page where the events should go.
  2. Add a “Custom HTML” block. Tip: type /html on an empty line. Then press Enter.
  3. Paste the code into the block. You can paste the second line right below it.
  4. Look at the preview. The widget only shows if your website's address is in the manager.
  5. Save the page. Or publish it.

Important: only Administrators and Editors may add this code. On a WordPress network, only Super Admins may. For everyone else, WordPress deletes the code when they save.

WordPress.com

On WordPress.com, it depends on your plan. WordPress.com says the code works on all paid plans. These are Personal, Premium, Business and Commerce. First you must turn on the hosting features. Installing a plugin is enough. On Commerce they are already on.

On the free plan, WordPress.com deletes the code when you save. Then you have 2 options: move to a paid plan. Or add a link to your organisation's page on supodo.

The steps are the same as for WordPress above.

Jimdo

These steps are for Jimdo Creator. Some Jimdo plans do not allow your own code. Check your plan.

  1. Open your website. Click “Edit”.
  2. Go to the place for the widget. Click “Add Element”. Then click “More elements and Add-ons”. Choose “Widget/HTML”.
  3. Paste the code. Click “Save”. You cannot see the widget? Then reload the page.

Wix

On Wix, the widget always sits in a frame. So you do not need the whole code. You only need the address of your widget.

  1. In the editor, click “Add Elements”. Then click “Embed Code”. Then click “Popular Embeds”. Choose “Embed a site”.
  2. Enter the address of your widget. In the code, it comes after src= in quotation marks. It looks like this: https://app.supodo.com/embed/WIDGET-ID
  3. Drag the frame as tall as you need. The second line does not work on Wix.
  4. Publish the page. Add the address of your Wix website in the manager.

Plain HTML

  1. Paste the code into the body of your page. Put it where the events should go.
  2. You can paste the second line right below it.
  3. Upload the page to your server. Open it with https://.

The title helps when the page is read out

The code has a title. This is the part with title="…". Some people have websites read out to them. For example, blind people. The program reads the title out loud. Then they know what is in the widget. That is why you must not delete the title. You may change it.

If it does not work

The widget is blank or shows an error

  • Is your website's address in the manager? Exactly as it looks in the browser?
  • Does your website's address start with https://? It does not work with http://.
  • Is the address with www. or without www. missing? Add both.
  • Did you just change something? Wait 1 minute. Then reload the page.

The widget has a scrollbar

At first, the widget always has the same height. Paste the second line from the manager below the code. Then the widget grows to fit its content. You can also change the height in the code. This is the part height:600px. On Wix, drag the frame taller.

The code is gone after I save

Then your website does not allow your own code here. On WordPress, this is often because of your role. On WordPress.com, it is often your plan. You can read more about this above.

Do you need help? Write to us through the contact form.