Skip to content
Guidewinds
Resources/Help Guides
Help Guide

Embed Widget Guide

Add the Guidewinds booking widget to your website so anglers can view availability and book directly — no redirects needed.

5 min read

What the Embed Widget Does

The embed widget lets you add a fully functional booking experience directly on your own website. Anglers can browse trips, check availability, and complete a booking — all without leaving your site.

How It Works

The widget loads in an iframe on your page. It connects to your Guidewinds account in real time, so availability and pricing are always up to date.

Step-by-Step Setup

Step 1: Get Your Embed Code

  1. Go to Dashboard → Settings → API & Integrations
  2. Find the "Embed Widget" section
  3. Copy the embed snippet provided

Step 2: Add to Your Website

Paste the embed code into any HTML page where you want the booking widget to appear. The basic embed looks like this:

<div id="guidewinds-booking"></div>
<script src="https://guidewinds.com/embed.js"
  data-slug="your-business-slug">
</script>

Pro Tip

Replace your-business-slug with your actual business slug. You can find it in Dashboard → Settings → General.

Step 3: Verify It Works

Open your website in a browser and confirm the widget loads. You should see your trips, pricing, and available dates.

Customization Options

Theme & Colors

The widget automatically inherits your branding settings from Dashboard → Settings → Branding. If you have a custom primary color set, the widget will use it.

Showing a Specific Service

To show only one trip, add the data-service attribute:

<script src="https://guidewinds.com/embed.js"
  data-slug="your-business-slug"
  data-service="service-id">
</script>

Container Sizing

The widget is responsive by default. It fills the width of its parent container and adjusts height automatically. You can control the size by styling the container element:

<div id="guidewinds-booking"
  style="max-width: 600px; margin: 0 auto;">
</div>

Enterprise Plan Requirement

Plan Requirement

The JavaScript embed widget is available on the Enterprise plan. The standard embeddable booking widget (iframe) is available on Professional and above. Upgrade at Pricing to access the advanced JavaScript widget with full customization.

Troubleshooting

Widget not loading?

  • Verify your business slug is correct in the data-slug attribute
  • Make sure you have at least one active trip with availability set
  • Check your browser console for JavaScript errors

Styling conflicts?

The widget runs in an iframe, so your site's CSS will not affect it. If you need to adjust the iframe dimensions, style the parent container.

Back to all help guides