Vanilla JS Timely Modal

Features

• Open Ditto's timely modal in any website to book call advisory slots
• Close the timely modal programmatically (sends close message to iframe)
• Responsive layout: centered on desktop, contained on tablet, bottom-sheet on mobile
• Loading spinner while the booking page loads
• Supports UTM params, embed configuration, and form prefill

openTimely

openTimely(eventName, params, env, options)

| Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | eventName | string | Yes | — | The timely event name | | params | object | No | {} | UTM and custom query params | | env | string | No | "prod" | "prod" or "staging" | | options | object | No | {} | Additional configuration (see below) |

Make use of staging env to test out timely prior to using production version.

options.embed

Override embed parameters. Defaults are applied if not specified.

| Key | Type | Default | Description | |-----|------|---------|-------------| | embed_type | "popup" | "inline" | "popup" | How the embed should display | | embed_domain | string | window.location.host | Domain where the iframe is embedded | | embed_path | string | window.location.pathname | Path where the iframe is embedded |

options.prefill

Prefill form fields in the booking page. All fields are optional.

| Key | Type | Description | |-----|------|-------------| | name | string | User's full name | | email | string | User's email address | | phone | string | User's phone number | | product | string | Product or service identifier | | query | string | User's query or question | | date | string | Preferred date |

Supported UTM params

utm_source
utm_campaign
utm_medium
utm_content
utm_term

closeTimely

closeTimely()

No parameters. Sends a close message to the iframe and hides the modal.

Installing

npm install @ditto-insurance/vanilla-timely

Usage

With a bundler (ES module)

import { openTimely, closeTimely } from '@ditto-insurance/vanilla-timely';

// Basic usage
openTimely("ditto-hotline", { utm_source: "blog" }, "prod");

// With embed override
openTimely("ditto-hotline", { utm_source: "blog" }, "prod", {
  embed: { embed_type: "inline" }
});

// With prefill
openTimely("ditto-hotline", { utm_source: "blog" }, "prod", {
  prefill: { name: "John", email: "[email protected]", phone: "9876543210" }
});

// Close programmatically
closeTimely();

Without a bundler (IIFE script tag)

Build the IIFE bundle:

npm run build:iife

Then include it in your HTML:

<script src="dist/vanilla-timely.iife.js"></script>
<script>
  function openModal() {
    DittoTimely.openTimely("ditto-hotline", { utm_source: "landing-page" }, "prod");
  }

  function closeModal() {
    DittoTimely.closeTimely();
  }
</script>

<button onclick="openModal()">Open Modal</button>
<button onclick="closeModal()">Close Modal</button>