Website chatbots

A chatbot answers your website's visitors for you, from what you teach it about your business. Visitors don't need an account; the replies use your plan's tokens.

Make one

<script src="https://api.chatular.ai/api/chatbot/widget.js" data-bot="YOUR_BOT_ID" async></script>

Or as a full-width chat

To put the chat inside a page of your site rather than a button in the corner, use this instead. It fills the width of its place, and you can change the height. Allowed websites apply. Actions for signed-in visitors need the script line, not this.

<iframe src="https://api.chatular.ai/api/chatbot/public/YOUR_BOT_ID/embed" title="Chat" style="width: 100%; height: 600px; border: 0;" allow="clipboard-write"></iframe>

Where it shows

• Under Allowed websites, list the sites that may show it. With none listed, any site may.
• The Live switch pauses it everywhere at once. A paused chatbot shows nothing.
• Under Design, turn on WhatsApp or email and add the number or address: the chat window then shows a link to each, which takes the visitor there. The chatbot doesn't answer in those apps; you do.
• Under Only on these pages, list the pages that show the chat, like /overview or /reports/*. With none listed, every page does. It follows route changes in a single-page app.
• Visitors can switch the chat between light and dark with the button in its header; their browser remembers it. Theme sets how it starts.

Options on the script tag

From your page's JavaScript

<button onclick="Chatular.open()">Chat with us</button>

<script>
  // Once the chat script has loaded:
  Chatular.identify({ name: 'Maya', email: 'maya@example.com' });
  Chatular.send('Do you deliver on Sundays?');
</script>

Live data from your API

In the chatbot's Actions tab, list calls to your own API so it can answer from live data, such as a signed-in customer's orders or figures. Before each answer it picks the calls the question needs, fills in their inputs from the conversation (a call may use an id another one returned), and answers from what comes back. It never touches your database.

• Your API's address goes before each action's path, and must be https.
• Each action has a name, When to use it (the chatbot reads this to choose), GET or POST, a path (an input in braces goes into it, like /orders/{orderId}) and its inputs; the others go in the query (GET) or the JSON body (POST).
• Read from a document drafts the actions from your API's documentation in the chatbot's knowledge. Check each one.
• Try it calls an action at once and shows what came back.

An action only for signed-in visitors sends the visitor's sign-in token from your site as Authorization: Bearer, so your API answers as them and they see only what they may. Give the chat the token once they are signed in. It asks for it before every message, so it is never out of date, and never stores it. Without one, the chatbot asks the visitor to sign in.

<script>
  // Once the visitor is signed in on your site:
  Chatular.identify({ getToken: () => yourApp.getAccessToken() });

  // When they sign out:
  Chatular.reset();
</script>

Redirects aren't followed and each call has 8 seconds to answer. Conversations show which calls each reply made, never what they returned.

Conversations

Each chatbot's first tab, Conversations, shows what visitors asked, newest first: their name and email when they gave them, the page they were on, and every message. A chatbot's card says how many are new. Inbox under Agent lists every chatbot's in one place, Contacts lists everyone who left a name or email, and Export there saves that list as a CSV file. Chats from the preview are marked Test. Under each reply a visitor can give a thumbs up or down: a conversation with a reply marked wrong says so in the list, and the reply says so when you open it.

From your own code

An API key (Settings › API) works on the chatbot routes too.

curl "https://api.chatular.ai/api/chatbot/conversations?bot=YOUR_BOT_ID" \
  -H "Authorization: Bearer YOUR_API_KEY"

Want your own chat window instead of the widget? Call the visitor route from your page. It needs no key, keeps to the chatbot's allowed websites, and its chats show in Conversations like the widget's. The reply streams back as events, as in the API.

curl -N https://api.chatular.ai/api/chatbot/public/YOUR_BOT_ID/chat \
  -H "Content-Type: application/json" \
  -d '{"visitorId":"visitor-123456","message":"Do you deliver on Sundays?"}'