DocsEmbed Widget

Embed Widget

Add GetTalk booking to any website with a simple script tag. No coding experience required.

Quick Start

Add this script tag to your website where you want the booking widget to appear:

html

<script
  src="https://gettalk.co/embed.js"
  data-username="your-username"
></script>

Replace your-username with your GetTalk username.

Display Modes

Inline (Default)

Embeds the calendar directly on your page as an iframe.

html

<script
  src="https://gettalk.co/embed.js"
  data-username="your-username"
  data-mode="inline"
></script>

Popup Button

Displays a button that opens the booking calendar in a modal overlay.

html

<script
  src="https://gettalk.co/embed.js"
  data-username="your-username"
  data-mode="popup"
  data-text="Schedule a Meeting"
  data-color="#f59e0b"
></script>

Custom Container

Embed into a specific element on your page by specifying a container ID.

html

<div id="booking-widget"></div>

<script
  src="https://gettalk.co/embed.js"
  data-username="your-username"
  data-container="booking-widget"
></script>

Configuration Options

Attribute	Type	Default	Description
`data-username`	string	required	Your GetTalk username
`data-event`	string	—	Specific event type slug to show
`data-mode`	string	inline	Display mode: inline, popup, or button
`data-text`	string	Book a Meeting	Button text (popup mode only)
`data-color`	string	#f59e0b	Button color (popup mode only)
`data-container`	string	—	ID of element to embed into

JavaScript API

Control the widget programmatically using the global GetTalk object.

Open Modal

javascript

// Open booking modal for a user
GetTalk.open('username')

// Open for a specific event type
GetTalk.open('username', 'consultation')

Close Modal

javascript

// Close any open modal
GetTalk.close()

Check Status

javascript

// Check if widget is loaded
if (window.GetTalk?.loaded) {
  console.log('GetTalk widget is ready')
}

Events

Listen for booking events to integrate with your application.

Booking Complete

Fired when a booking is successfully created.

javascript

document.addEventListener('gettalk:booking:complete', (event) => {
  const booking = event.detail
  console.log('Booking created:', booking)

  // Example: Track conversion
  analytics.track('booking_created', {
    bookingId: booking.id,
    startTime: booking.startTime,
    attendeeEmail: booking.attendeeEmail
  })
})

Widget Loaded

Fired when the widget script has finished loading.

javascript

document.addEventListener('gettalk:loaded', () => {
  console.log('GetTalk widget loaded')
})

Examples

Custom Button Trigger

Use your own button design to open the booking modal.

html

<!-- Your custom button -->
<button onclick="GetTalk.open('your-username')">
  Book a Call
</button>

<!-- Load the widget script (no visible element) -->
<script src="https://gettalk.co/embed.js" data-username="your-username"></script>

React Integration

tsx

import { useEffect } from 'react'

declare global {
  interface Window {
    GetTalk?: {
      open: (username: string, event?: string) => void
      close: () => void
      loaded: boolean
    }
  }
}

export function BookingButton({ username }: { username: string }) {
  useEffect(() => {
    // Load embed script
    const script = document.createElement('script')
    script.src = 'https://gettalk.co/embed.js'
    script.setAttribute('data-username', username)
    document.body.appendChild(script)

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

  return (
    <button onClick={() => window.GetTalk?.open(username)}>
      Schedule a Meeting
    </button>
  )
}

Specific Event Type

Embed a specific event type directly without showing your full booking page.

html

<script
  src="https://gettalk.co/embed.js"
  data-username="your-username"
  data-event="30-min-consultation"
  data-mode="inline"
></script>

Styling

The widget inherits some styles from your page. For the popup button, you can customize:

Button color via data-color
Button text via data-text
Or use your own button with GetTalk.open()

The inline iframe and modal have their own isolated styles and cannot be customized. For custom branding inside the booking page, upgrade to Pro and configure branding in your dashboard.

Troubleshooting

Widget not appearing?

Check that data-username is correct and the script URL is accessible. Open browser DevTools and check the console for errors.

Modal not opening?

Ensure the widget has finished loading before calling GetTalk.open(). Check that window.GetTalk.loaded is true.

Events not firing?

Event listeners should be added before the booking is completed. Make sure you're listening on document, not on a specific element.