Put the booking calendar on your website

Summary

The KonversAI booking calendar shows your open days and times on your own web page. A customer picks a day or a time, and KonversAI opens a booking chat on the same page. You copy the code from the Embed on your website section on the calendar page in the KonversAI console, and paste the code into your page HTML. The code shows one calendar only, in the language you choose.

Who can do this

In the KonversAI console, you need calendar access to open the calendar page. To pick the chat entry point for the booking chat, you also need tenant settings access. If you do not see Calendar or Settings in the left sidebar, ask a tenant administrator to change your role.

On your website, you need a person who can edit the HTML, or who can paste a script into your content management system.

Before you start

Make sure your tenant has the calendar feature. Calendar is a per-tenant feature flag. When the feature is off, the Calendar item is missing from the left sidebar of the KonversAI console. Contact support to switch the feature on.

Create and save the booking calendar first. The Embed on your website section appears only on a saved calendar. Read Set up a booking calendar for those steps.

Create a chat entry point at Settings > Entry-points, on the Chat tab. The booking chat that opens after a customer picks a time belongs to that entry point. Read Install the widget on your website for those steps.

Steps

1. Select Calendar in the left sidebar of the KonversAI console, then select Calendar settings.
2. Go to Your calendars and select Edit on the calendar you want on the page. The Edit calendar page opens.
3. Go to Embed on your website. You find the section at the bottom of the page, and in the list of sections beside the form.
4. Choose a Chat entry point when your tenant has more than one. The booking chat opens with that entry point. With one entry point, KonversAI uses that entry point and shows no choice.
5. Choose a Language. Page language (automatic) follows the language of the web page. Choose Norwegian, Swedish, Danish, German or English to fix the language instead.
6. Select Copy code. The button changes to Copied.
7. Paste the code into your page HTML where you want the booking calendar to appear.
8. Publish the page, then open the page in a browser. The booking calendar shows the next five weeks for this calendar, with no calendar picker.

The code has this shape. The KonversAI console fills in the real values, so copy the code from Embed on your website instead of typing the code by hand.

<script
  src="https://your-chat-service.example.com/static/widget/calendar.js"
  data-tenant="your-company"
  data-tenant-key="YOUR_REFERENCE_KEY"
  data-api-base="https://your-chat-service.example.com"
  data-calendar="YOUR_CALENDAR_ID"
  data-locale="nb"
></script>

data-calendar locks the booking calendar to this calendar. data-locale sets the language. The code has no data-locale when you choose Page language (automatic).

To place the booking calendar inside an element somewhere else on the page, add data-target with a CSS selector, for example data-target="#booking". Without data-target, the booking calendar appears right after the script tag.

FAQ

Why does the booking calendar list all my calendars in a dropdown?

The script tag on your page has no data-calendar attribute. Without data-calendar, a tenant with more than one calendar gets a picker with All calendars and the name of each calendar. To show one calendar only, copy the code again from that calendar. In the KonversAI console, select Calendar, then Calendar settings, then Edit on the calendar. Go to Embed on your website and select Copy code. The new code has data-calendar, so the booking calendar hides the picker. Customers on that page cannot see or choose your other calendars.

The page says “This calendar is not available.” What is wrong?

The data-calendar value on your page does not match a calendar that takes bookings. Check three things. First, copy the code again from Embed on your website on the calendar page, at Calendar > Calendar settings > Edit, and replace the code on your page. Second, make sure the calendar still exists in Your calendars. Third, check that the calendar card does not say Season ended. A calendar whose Closes on date is in the past is not available. The browser developer console also shows [Calendar Widget] data-calendar does not match an available calendar: followed by the ID the page used.

How do I show the booking calendar in Norwegian, Swedish or Danish?

Choose the Language under Embed on your website on the calendar page, then select Copy code. The code then has a data-locale attribute: nb for Norwegian, sv for Swedish, da for Danish, de for German or en for English. The buttons, headings, messages, weekday names, month names and dates use that language. On a site with one page for each language, paste code with a different Language on each page. You can also change data-locale in code you already pasted. no and region forms such as nb-NO also work.

Which language does Page language (automatic) use?

Page language (automatic) under Embed on your website leaves data-locale out of the code. The booking calendar then tries four sources in this order. First, the lang attribute of the <html> tag on your page, such as <html lang="sv">. Second, the language the customer’s browser prefers. Third, the Default language of your tenant, at Settings > AI preferences in the KonversAI console. Last, English. The booking calendar skips any source in a language it does not support. It supports English, Norwegian, Swedish, Danish and German.

Why is the calendar name still in English?

The booking calendar shows the calendar name exactly as you typed it in Name under Basics on the calendar page. KonversAI does not translate calendar names. Give each calendar a name in the language of the page that shows it. Select Calendar, then Calendar settings, then Edit on the calendar to change Name, then select Save calendar.

Which language does the booking chat use?

When the page has no chat widget of its own, the booking calendar opens the booking chat with the same data-locale value, or with the page’s <html lang>. When the page already has the KonversAI chat widget snippet, the booking chat opens in that chat widget, with that snippet’s settings. Add the same data-locale attribute to the chat widget snippet to set its language.

Why does the code say YOUR_REFERENCE_KEY?

KonversAI could not fill in the key of a chat entry point. Either your role has no tenant settings access, or your tenant has no chat entry point yet. Ask a tenant administrator to copy the code from Embed on your website on the calendar page instead. Or replace YOUR_REFERENCE_KEY with the data-tenant-key value from Embed code on a chat entry point at Settings > Entry-points, on the Chat tab. The booking chat does not open until the key is correct.

Nothing appears where I pasted the code. What do I check?

Open the browser developer console. The warning [Calendar Widget] data-tenant and data-widget-key are required. means the script tag is missing data-tenant or data-tenant-key. Copy the code again from Embed on your website on the calendar page and paste the whole code. The text “Could not load calendar.” in the booking calendar means the browser could not reach KonversAI. Check that your page loads the src address in the code, and that your Content Security Policy allows that address.