Custom HTML

If you’re building a custom website or using a platform that lets you edit raw HTML, you can add a Submitsu widget by pasting the iframe code directly into your page.

Step 1: Get your embed code

Choose the widget you want from the Widgets overview and copy the embed code using the Copy Widget button. Make sure you’ve set the correct parameters (location path, club slug, etc.) before copying.

Step 2: Find where to add the code

Depending on your setup, you might be:

Editing an HTML file directly (e.g. index.html)
Using a template or layout file
Adding a custom HTML section in a page builder
Using a CMS that supports raw HTML blocks

Place the code where you want the widget to appear on the page.

Step 3: Paste the iframe code

Paste the full iframe block into your HTML. It will look like this:


<iframe
  src="https://www.submitsu.com/widgets/timetable/weekly?location=gb/england/london"
  width="100%"
  height="450"
  frameborder="0"
  title="BJJ Timetable">
</iframe>

Step 4: Adjust as needed

Container: Wrap the iframe in a <div> if you need to control width, padding, or alignment
Height: Change the height attribute (e.g. 450 to 600) to fit your layout
Width: Use width="100%" for responsive behaviour, or a fixed value like width="800" if you prefer

Example with a wrapper


<div class="widget-container" style="max-width: 800px; margin: 0 auto;">
  <iframe
    src="https://www.submitsu.com/widgets/timetable/weekly?location=gb/england/london"
    width="100%"
    height="450"
    frameborder="0"
    title="BJJ Timetable">
  </iframe>
</div>

Tips

Location path: The location parameter uses the same format as our Locations pages. You can copy the path from the URL when viewing a location (e.g. gb/england/london from /locations/gb/england/london).
Club filter: Add &club=your-club-slug to the src URL to restrict the widget to a specific club.
Theme: Add &mode=light or &mode=dark to match your site’s theme.