Flott Widget Integration Guide

The Flott booking widget provides a seamless way to integrate ride booking functionality into your website. This widget is built as a Web Component that can be embedded directly into any web page.

The widget provides:

• Complete booking flow with location selection
• Real-time pricing and availability
• Multiple language support (English, German, Italian)
• Customizable styling and branding
• Event-driven integration for seamless user experience

Get started with the Goflott widget in just a few steps:

Method 1 - JavaScript Widget (Recommended):

1. Load the widget script in your HTML
2. Add the widget element to your page
3. Configure with your partner ID

<script src="https://embed.goflott.com/embed.js"></script>

<goflott-widget partner-id="your-partner-id"></goflott-widget>

Method 2 - Simple iframe embedding:

For basic integration without JavaScript, use an iframe:

<iframe 
  src="https://embed.goflott.com?partnerId=your-partner-id&primaryColor=%23ea580c"
  width="100%"
  height="400"
  frameborder="0">
</iframe>

That's it! The widget will automatically load and be ready for bookings.

The widget supports extensive configuration through attributes and JSON configuration.

Basic attributes:

• partner-id (required): Your partner identifier
• locale: Language setting (en, de, it)
• theme: Visual theme (light, dark, auto)
• primary-color: Brand color for buttons and accents
• title-en, title-de, title-it: Multilingual widget titles

Advanced configuration using the config attribute:

<goflott-widget 
  partner-id="your-partner-id"
  config='{"branding":{"title":"Book Your Ride"},"layout":{"background":"card","shadow":"card"}}'>
</goflott-widget>

For React applications, you can use the widget as shown in our BookingWidget component:

import { useEffect } from 'react';

export function BookingWidget() {
  useEffect(() => {
    // Load widget script
    const script = document.createElement('script');
    script.src = 'https://embed.goflott.com/embed.js';
    script.async = true;
    document.head.appendChild(script);
    
    // Set up event listeners
    const handleBookingCompleted = (event) => {
      console.log('Booking completed:', event.detail);
    };
    
    document.addEventListener('booking-completed', handleBookingCompleted);
    
    return () => {
      document.removeEventListener('booking-completed', handleBookingCompleted);
    };
  }, []);

  return (
    <goflott-widget 
      partner-id="your-partner-id"
      locale="en"
      theme="light"
      primary-color="#ea580c"
    />
  );
}

The widget emits several events that you can listen to for integration:

• booking-completed: Fired when a booking is successfully completed
• booking-error: Fired when a booking fails
• pickup-location-change: Fired when the pickup location is selected
• dropoff-location-change: Fired when the dropoff location is selected

const widget = document.querySelector('goflott-widget');

widget.addEventListener('booking-completed', (event) => {
  const { tripId, orderId } = event.detail;
  console.log('Booking completed:', { tripId, orderId });
  // Redirect to success page or update UI
});

widget.addEventListener('booking-error', (event) => {
  const { code, message } = event.detail;
  console.error('Booking error:', { code, message });
  // Show error message to user
});

The widget provides multiple styling options:

Transparent (Default): Perfect for seamless integration

Card Style: Professional appearance with background and shadow

Custom Branding: Match your brand colors and theme

You can customize the widget appearance using:

• CSS custom properties for colors and fonts
• Configuration objects for layout and branding
• Theme options for light/dark mode support

<goflott-widget 
  partner-id="your-partner-id"
  config='{"branding":{"primaryColor":"#ea580c","title":"Book Your Ride"},"layout":{"background":"card","shadow":"subtle"}}'>
</goflott-widget>

For simple integration without JavaScript, you can use iframe embedding:

Basic iframe setup:

<iframe 
  src="https://embed.goflott.com?partnerId=your-partner-id"
  width="100%"
  height="400"
  frameborder="0">
</iframe>

Supported URL parameters:

• partnerId (required): Your partner identifier
• primaryColor: Brand color (URL encode # as %23, e.g., %23ea580c for #ea580c)
• locale: Language setting (en, de, it)
• theme: Visual theme (light, dark)

Example with custom styling:

<iframe 
  src="https://embed.goflott.com?partnerId=your-partner-id&primaryColor=%23ea580c&locale=en&theme=light"
  width="100%"
  height="450"
  frameborder="0"
  style="border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
</iframe>

Note: iframe embedding provides basic functionality but has limitations compared to the JavaScript widget (no event handling, limited customization).

The widget supports multiple languages:

• en: English (default)
• de: German
• it: Italian

Set the locale using the locale attribute:

<goflott-widget partner-id="your-partner-id" locale="de"></goflott-widget>

You can also provide multilingual titles:

<goflott-widget 
  partner-id="your-partner-id"
  title-en="Book Your Ride"
  title-de="Ihre Fahrt buchen"
  title-it="Prenota la tua corsa">
</goflott-widget>

Common issues and solutions:

Widget not appearing:

• Check that the script loads correctly
• Verify your partner ID is correct
• Check browser console for JavaScript errors

Styling issues:

• Ensure parent container has sufficient space
• Check for CSS conflicts with !important rules
• Use browser dev tools to inspect the shadow DOM

Events not firing:

• Add event listeners after the widget script loads
• Verify correct event names (kebab-case)
• Check that the widget element is properly selected

For additional support, contact [email protected] with:

• Exact timestamp of the issue
• Browser and version information
• Console error messages
• Your partner ID (last part only for security)