Website Integration

Category: Marketing | Code: website_integration

With Website Integration you can embed Bookicorn widgets directly into your own website. Customers can book courses, buy credits, and redeem vouchers – without ever leaving your website. The widgets automatically adapt to your studio's colors and logo.

What you get

• Widget Builder with drag & drop configuration
• 5 widget types: Course schedule, booking form, credit packages, voucher redemption, studio info
• Auto-branding: Widgets automatically adopt your studio colors and logo
• Embedding via iframe or script tag – works on any website
• Responsive design – looks great on desktop and mobile
• No coding required – copy & paste is all you need

Activation

Widget Builder

The Widget Builder is the central tool for your website integration. You configure which widgets you want to embed and how they should look.

How it works

Live preview

On the right side of the Widget Builder you see a live preview of the widget – exactly as it will appear on your website. Changes are shown immediately.

Available widgets

1. Course schedule widget

Displays your current course schedule on your website. Customers can see all courses with date, time, trainer, and available spots.

Configuration options:

• View: weekly view or list view
• Filters: course types, locations, trainers
• Time range: current week, next 2 weeks, next month
• "Book now" button directly in the widget

<!-- Course Schedule Widget -->
<div id="bookicorn-schedule"></div>
<script src="https://widget.bookicorn.net/schedule.js"
  data-studio="your-studio-id"
  data-lang="en">
</script>

2. Booking form widget

A complete booking form for a specific course or course type. Customers choose their time slot, log in, and book – all without leaving your website.

Configuration options:

• Pre-filter to a specific course type
• Pre-filter to a specific location
• Display: full-width or compact

Tip: Use the booking form widget on landing pages for individual courses. A dedicated page per course type with a direct booking form converts significantly better than a general course overview.

3. Credit packages widget

Displays your credit packages for direct purchase. Customers can select and buy packages without having to open the Bookicorn app.

Configuration options:

• Which packages to show (all or selected only)
• Display: grid or list
• Highlight a package (e.g. "Most popular")

4. Voucher redemption widget

A simple form where customers can enter their voucher code. After entering the code, available offers with the discount applied are displayed.

Note: The voucher redemption widget requires the Voucher System addon.

5. Studio info widget

Shows basic information about your studio: address, opening hours, contact details, and a "Book now" button. Handy for the sidebar or footer of your website.

Auto-branding

All widgets automatically adopt your studio branding:

• Primary color: From your studio settings (for buttons, links, highlights)
• Logo: Your studio logo appears in the widget header
• Font: System fonts that work well with most websites
• Rounded corners and spacing: Optimized for a modern, clean look

You can update your branding at any time in your studio settings – all widgets update automatically.

Note: The Bookicorn logo does not appear in the widgets. For a fully white-label appearance without any Bookicorn reference, see the Mobile App addon (White Label).

Embedding on your website

Option 1: iframe (simple)

For most website builders (Wix, Squarespace, Jimdo, etc.) the iframe is the simplest option:

<iframe
  src="https://widget.bookicorn.net/[studio-id]/schedule"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 12px;">
</iframe>

Option 2: Script tag (recommended)

For WordPress, Webflow, or custom HTML pages, the script tag is the better option – the widget automatically adjusts its height:

<!-- Widget Container -->
<div id="bookicorn-widget"></div>

<!-- Widget Script -->
<script
  src="https://widget.bookicorn.net/loader.js"
  data-studio="[your-studio-id]"
  data-widget="schedule"
  data-lang="en"
  async>
</script>

Platform guides

Responsive design

All widgets are mobile-optimized and automatically adapt to the screen width:

• Desktop (>768px): Full view with all columns
• Tablet (480–768px): Adapted layout, more compact display
• Mobile (<480px): Single-column layout, stacked vertically

You don't need to configure anything – this happens automatically.

Combining multiple widgets

You can embed multiple different widgets on your website at the same time. Recommended combination for an optimal booking page:

Tips for better conversion

Prominent placement

• Don't hide the widget – place the course schedule on the homepage "above the fold" (visible without scrolling)
• Link a dedicated booking page in your navigation
• Have call-to-action buttons on other pages point to the booking page

Clear call-to-actions

• Use action-oriented headings: "Book a course now", "Secure your spot"
• Place short introductory texts above the widget: why should someone book right now?

Loading time

• The script tag loads asynchronously and barely affects your website's loading time
• The iframe is slightly slower – prefer the script tag for performance-critical websites

A/B testing

Test different placements and widget configurations:

• Course schedule widget at the top vs. credit packages at the top
• Weekly view vs. list view
• With or without trainer filter

Frequently asked questions

Do the widgets work in all browsers? Yes. The widgets support all modern browsers (Chrome, Firefox, Safari, Edge) and Internet Explorer 11+.

Do customers need a Bookicorn account to book? Yes. At checkout, customers are prompted to log in or register. Registration is free and takes less than a minute.

Are the widgets automatically updated when I change the course schedule? Yes. Widgets always show real-time data – schedule changes in the admin are immediately visible in the widget.

Can I embed the widget on multiple pages at the same time? Yes, without any restrictions. You can use the same widget code on as many pages as you like.

What happens if my studio name or logo changes? All widgets update automatically – you don't need to regenerate the embed code.