How to Add Karl Konnekt Widgets to Your Website

Simple Widget Setup Instructions for Kangaroo Kaptns

Follow these quick steps to add your Karl Konnekt widget to your website in just minutes, no coding knowledge required. The current widget system uses a hosted loader script plus a .kk-widget placeholder.

Step 1: 🖱️ Copy Your Widget Code

In your Kaptn Karl app (under Website Widgets), find your widget and copy the snippet shown there. The widget key is not a Joey password or payment secret, but it does authorize public widget rendering for your Kaptn profile, so only share it where you intend the widget to appear.

Your snippet looks like this:

<!-- Karl Konnekt widgets -->
<script src="https://karlkonnekt.app/assets/widget-loader.js" defer></script>

<!-- Upcoming Hops -->
<div class="kk-widget"
     data-widget="upcoming-hops"
     data-kaptn="YOUR_KAPTN_ID"
     data-key="YOUR_WIDGET_KEY"></div>

Don't worry, your personal ID, widget key and widget settings are automatically included in the snippet you copy from Kaptn Karl. Add the loader script once per page; you can place more than one widget placeholder below it if needed.

Step 2: ✏️ Paste It Into Your Website

For WordPress users (or similar site builders):

1. Go to your WordPress dashboard.
2. Edit the page or post where you want to show your upcoming activities.
3. Add a new "Custom HTML" block.
4. Paste the entire snippet you copied in Step 1.

For Squarespace, Wix, Webflow, or other builders, use an embed/custom-code block. If the builder strips or delays script tags, keep a normal booking link on the page as a fallback, or ask your site admin to add the loader once in the site header/footer and leave the .kk-widget placeholder in the page body.

Step 3: ✅ Save and Celebrate

Save your changes and visit your website. 🎉

Sample Widget integration jaydaptif.solutions website

Your Upcoming Hops are now displayed, and your clients can see your activities and follow the Hop links. When a Hop is full, the widget can show the waitlist CTA (Hop on (waitlist)). Canceled Hops are marked as canceled and do not link to booking.

Karl Konnekt also supports a Season Calendar widget for published Season Pass / Course occurrences. It uses the same loader pattern with data-widget="season-calendar":

<script src="https://karlkonnekt.app/assets/widget-loader.js" defer></script>

<div class="kk-widget"
     data-widget="season-calendar"
     data-kaptn="YOUR_KAPTN_ID"
     data-key="YOUR_WIDGET_KEY"></div>

🔗 Why the backlink?

The link at the bottom (powered by Karl Konnekt) helps visitors understand who powers the widget and can send more Joeys and Kaptns into the Karl Konnekt community. Widget routes render public-facing Kaptn, Hop, Season, date, link, image, and aggregate-capacity data; they do not render participant IDs or Joey identities.

If you have questions or need help, Karl is here for you! 🦘