Website Widget

Installation time: 5 minutes • Zero backend required

Embed insurance quotes directly on your website with our JavaScript widget

Widget Features

Easy Installation

Add insurance quotes to your website with just a few lines of code

Customizable Design

Match your brand with custom colors, fonts, and styling options

Mobile Responsive

Looks perfect on all devices from phones to desktop monitors

Framework Support

Works with React, Vue, Angular, and vanilla JavaScript

Pre-fill Data

Automatically populate fields with customer information

Conversion Optimized

Designed for maximum conversion with A/B tested layouts

Basic Installation (Vanilla JavaScript)

Quick Start

Add the widget to any HTML page with these simple steps:

index.html

<!-- Add to your HTML page -->
<!DOCTYPE html>
<html>
<head>
  <title>Event Booking with Insurance</title>

  <!-- Daily Event Insurance Widget CSS -->
  <link rel="stylesheet" href="https://cdn.dailyeventinsurance.com/widget/v1/dei-widget.css">
</head>
<body>
  <!-- Insurance Widget Container -->
  <div id="dei-insurance-widget"></div>

  <!-- Daily Event Insurance Widget JS -->
  <script src="https://cdn.dailyeventinsurance.com/widget/v1/dei-widget.js"></script>

  <script>
    // Initialize the widget
    DailyEventInsurance.init({
      apiKey: 'YOUR_PUBLIC_API_KEY',
      container: '#dei-insurance-widget',
      theme: {
        primaryColor: '#14b8a6',
        borderRadius: '12px',
        fontFamily: 'Inter, system-ui, sans-serif'
      },
      prefill: {
        eventType: 'wedding',
        guests: 150
      },
      onQuoteGenerated: function(quote) {
      },
      onPolicyPurchased: function(policy) {
        // Redirect or show confirmation
      }
    })
  </script>
</body>
</html>

Get your API key: Log in to your dashboard at Settings → API Keys → Create Public Key

React / Next.js Integration

React Component

Use the widget as a React component with hooks and state management:

InsuranceWidget.jsx

// React Component Integration
import { useEffect, useRef } from 'react'

export function InsuranceWidget({ eventData, onPolicyPurchased }) {
  const widgetRef = useRef(null)

  useEffect(() => {
    // Load widget script
    const script = document.createElement('script')
    script.src = 'https://cdn.dailyeventinsurance.com/widget/v1/dei-widget.js'
    script.async = true
    document.body.appendChild(script)

    script.onload = () => {
      if (window.DailyEventInsurance && widgetRef.current) {
        window.DailyEventInsurance.init({
          apiKey: process.env.NEXT_PUBLIC_DEI_API_KEY,
          container: widgetRef.current,
          theme: {
            primaryColor: '#14b8a6',
            borderRadius: '12px'
          },
          prefill: {
            eventType: eventData.type,
            eventDate: eventData.date,
            guests: eventData.guests,
            venue: eventData.venue
          },
          onPolicyPurchased: (policy) => {
            onPolicyPurchased(policy)
          }
        })
      }
    }

    return () => {
      document.body.removeChild(script)
    }
  }, [eventData, onPolicyPurchased])

  return (
    <div
      ref={widgetRef}
      className="insurance-widget-container"
    />
  )
}

// Usage in your app
function EventBookingPage() {
  const [eventData, setEventData] = useState({
    type: 'wedding',
    date: '2026-08-15',
    guests: 150,
    venue: 'Grand Ballroom'
  })

  const handlePolicyPurchased = (policy) => {
    // Update your booking with insurance info
  }

  return (
    <div>
      <h1>Book Your Event</h1>
      {/* Your event booking form */}

      <h2>Add Insurance Protection</h2>
      <InsuranceWidget
        eventData={eventData}
        onPolicyPurchased={handlePolicyPurchased}
      />
    </div>
  )
}

Vue.js Integration

Vue Component

Integrate the widget into your Vue.js application:

InsuranceWidget.vue

<!-- Vue.js Component Integration -->
<template>
  <div>
    <h2>Add Insurance Protection</h2>
    <div ref="widgetContainer" class="insurance-widget"></div>
  </div>
</template>

<script>
export default {
  name: 'InsuranceWidget',
  props: {
    eventData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.loadWidget()
  },
  methods: {
    loadWidget() {
      const script = document.createElement('script')
      script.src = 'https://cdn.dailyeventinsurance.com/widget/v1/dei-widget.js'
      script.async = true

      script.onload = () => {
        window.DailyEventInsurance.init({
          apiKey: process.env.VUE_APP_DEI_API_KEY,
          container: this.$refs.widgetContainer,
          theme: {
            primaryColor: '#14b8a6'
          },
          prefill: {
            eventType: this.eventData.type,
            eventDate: this.eventData.date,
            guests: this.eventData.guests
          },
          onPolicyPurchased: (policy) => {
            this.$emit('policy-purchased', policy)
          }
        })
      }

      document.body.appendChild(script)
    }
  }
}
</script>

Advanced Customization

Full Configuration Options

Customize every aspect of the widget to match your brand and workflow:

advanced-config.js

// Advanced Customization Options
DailyEventInsurance.init({
  apiKey: 'YOUR_PUBLIC_API_KEY',
  container: '#dei-insurance-widget',

  // Theme customization
  theme: {
    primaryColor: '#14b8a6',
    secondaryColor: '#0ea5e9',
    backgroundColor: '#ffffff',
    textColor: '#1e293b',
    borderRadius: '12px',
    fontFamily: 'Inter, system-ui, sans-serif',
    fontSize: '16px'
  },

  // Layout options
  layout: 'vertical', // 'vertical' | 'horizontal' | 'compact'
  showLogo: true,
  showPoweredBy: true,

  // Coverage options
  coverageOptions: {
    showGeneralLiability: true,
    showPropertyDamage: true,
    showLiquorLiability: true,
    showCancellation: true,
    allowCustomAmounts: false
  },

  // Pre-fill customer data
  prefill: {
    eventType: 'wedding',
    eventDate: '2026-08-15',
    eventTime: '18:00',
    duration: 6,
    guests: 150,
    venue: {
      name: 'Grand Ballroom',
      address: '123 Main St, City, ST 12345'
    },
    contact: {
      name: 'Jane Smith',
      email: 'jane@example.com',
      phone: '+1-555-0123'
    }
  },

  // Callbacks
  onLoad: function() {
  },
  onQuoteGenerated: function(quote) {
    // Track in analytics
    gtag('event', 'insurance_quote', {
      quote_id: quote.id,
      premium: quote.premium
    })
  },
  onPolicyPurchased: function(policy) {
    // Track conversion
    gtag('event', 'purchase', {
      transaction_id: policy.id,
      value: policy.premium,
      currency: 'USD'
    })
  },
  onError: function(error) {
    console.error('Widget error:', error)
  }
})

Important Notes

•Use your public API key for widget integration (not your secret key)
•The widget handles all payment processing securely via PCI-compliant iframe
•Test in sandbox mode first before deploying to production
•Widget automatically adapts to mobile, tablet, and desktop screen sizes
•Callbacks fire in real-time - perfect for analytics and conversion tracking

Need Help with Installation?

Our team can help you customize and install the widget on your site