🔧 How to Integrate the New Widgets

Whether you're showcasing your activity calendar, prices, or special offerings, Eversports widgets help you display your services beautifully — right on your website.

This guide walks you through everything you need to embed or link the new widgets in just a few simple steps.

💡 Not sure which widget type to use yet? Check out: Showcase your activities and products via widgets

🧩 What Is a Widget?

A widget is a small, embeddable component that connects your website with your Eversports Manager. You can use it to show your:

Activity calendar (Schedule)
Pricing options
Special activities like retreats or courses

Widgets help your customers:

See real-time info
Book or buy directly on your site
Enjoy a mobile-friendly, seamless experience

🛠️ How to Embed a Widget on Your Website

1. Open the Widget in Eversports Manager

Go to Settings > Widgets [NEW]
Click on the widget you want to embed (or create a new one)
In the widget settings page, you’ll find:
- A widget code (<div data-eversports-widget-id="...">)
- A script (<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>)

2. Copy the Script and Widget Code

Click the “Copy code” button next to each snippet. These two elements are what you need to embed the widget on your website.

Screenshot 2025-03-21 at 12-06-47-png

3. Paste the Code on Your Website

Add the script once per page
Paste the widget code wherever you want the widget to appear

This is usually done using an HTML block, embed section, or custom code field in your website builder.

<!-- Only once per page -->
<script type="module" src="https://widget-static.eversports.io/loader.js" async defer></script>

<!-- Widget code -->
<div data-eversports-widget-id="your-widget-id-here"></div>

🔁 Want to Embed Multiple Widgets on the Same Page?

No problem!

Only add the script once
Paste as many different widget codes as needed

Each widget will appear where you placed its <div> and load its unique settings.

🔗 Prefer Linking Instead of Embedding?

You can also share a widget as a direct link instead of embedding it.

Here's how:

Go to Settings > Widgets [NEW]
Open the Widget Overview
Click the three dots next to your widget
Choose “Share link”

You’ll get a URL that you can:

Add as a button or link on your website
Share in emails or newsletters
Post on social media or landing pages

This is the easiest option if you don’t manage your website directly or want a quick way to promote something without embedding.

📲 Tips for a Smooth Integration

Match the widget background with your website for a clean look
Use the Preview function in Manager to check your styling
Test on mobile — the new widgets are optimized, but it’s good practice
Avoid iFrames — the new widgets no longer require them!