nvitepe
Embed docs Log in Get started free

Documentation

How to embed invitepe on your website

invitepe offers two website embeds: a Scheduler Widget (calendar popup, inline, or badge) and an AI Chat Widget that answers questions and books meetings. Both install with a single script tag — no framework required.

Which embed should you use?

Scheduler Widget

Visitors pick a date and time on your calendar. Best when the only job is scheduling — sales calls, demos, consultations.

Script: /invitepe.js

AI Chat Widget

A floating AI agent trained on your content. It answers FAQs and can open booking when the visitor is ready.

Script: /invitepechat.js

Embed a booking popup

The booking popup opens your scheduling calendar in a modal when someone clicks a button on your site. Replace yourname/30-min with your invitepe username and event type slug (Dashboard → Scheduler Widget, or Event Types).

Popup on click — HTML snippet

<script src="https://www.invitepe.com/invitepe.js"></script>

<button data-invitepe="yourname/30-min">
  Book a 30-min call
</button>
  1. 1Create an active event type in invitepe.
  2. 2Paste invitepe.js once on the page.
  3. 3Add data-invitepe="username/event-slug" to any button, link, or clickable element.

Inline booking calendar

Embed the full calendar inside a page section (dedicated “Book a call” page). 

<script src="https://www.invitepe.com/invitepe.js"></script>

<div data-invitepe-inline="yourname/30-min"
     style="height:700px"></div>

Floating booking badge

A sticky “Book” pill in the corner of every page — no extra HTML beyond the script tag. 

<script src="https://www.invitepe.com/invitepe.js"
  data-invitepe-popup="yourname/30-min"
  data-invitepe-label="Book a call">
</script>

Interactive demos and the JS API (invitepe.open()) are also covered on the Configure & Embed page.

Embed the AI chat widget

The chat widget loads invitepechat.js and uses your AI Chat Widget subscription key from Dashboard → AI Chat Widget → Setup. Authorise your website origin before going live.

Floating chat bubble

<script
  src="https://www.invitepe.com/invitepechat.js"
  data-invitepe-chat-bubble="YOUR_SUBSCRIPTION_KEY"
  data-invitepe-chat-name="Acme Support"
  data-invitepe-chat-context="/docs/company.md"
  defer></script>

Button that opens chat

<script src="https://www.invitepe.com/invitepechat.js" defer></script>

<button data-invitepe-chat="YOUR_SUBSCRIPTION_KEY">
  Chat with us
</button>

Inline chat panel

<script src="https://www.invitepe.com/invitepechat.js" defer></script>

<div data-invitepe-chat-inline="YOUR_SUBSCRIPTION_KEY"
     style="height:600px"></div>

Important chat attributes

  • data-invitepe-chat-bubble — shows the floating bubble automatically.
  • data-invitepe-chat-name — header name / AI persona (max 60 characters).
  • data-invitepe-chat-context — public .md or .txt URL on your site so the AI can answer from your docs.
  • Authorised origins must include your production domain or live embeds are blocked.

FAQ

Booking widget vs chat widget?

Scheduler Widget = calendar only. AI Chat Widget = AI assistant that can also book. Many sites use both: chat for questions, booking popup for a dedicated CTA.

Does it work with WordPress / Webflow / React?

Yes. Paste the script in your site-wide header/footer or a custom HTML block. For SPAs, load the script once after mount.

Where do I get my codes?

Scheduler: Dashboard → Scheduler Widget. Chat: Dashboard → AI Chat Widget → Setup.