Hop Into Action: How to Easily Add Karl Konnekt Widgets to Your Website

4/24/2025

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!

Step 1: 🖱️ Copy Your Widget Code

In your Kaptn Karl app (under Website Widgets), find your widget and copy the snippet shown there.

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 class="kk-powered">
        <a href="https://karlkonnekt.com" target="_blank" rel="noopener">powered by Karl Konnekt</a>
    </div>
</div>

Don't worry, your personal ID, widget key and widget settings are automatically included!

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.

Step 3: ✅ Save and Celebrate

Save your changes and visit your website. 🎉

Sample Widget integration
Sample Widget integration ...

Your Upcoming Hops are now displayed beautifully, and your clients can easily see and join your activities!

🔗 Why the backlink?

The link at the bottom (powered by Karl Konnekt) helps boost your visibility on Google and increases trust with your visitors. It also helps us reach more Joeys and Kaptns to grow our community!

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