Prerequisites
Make sure the following are in place before getting started:
Waillo is part of your WaitWell license. Waillo is an add-on feature — if you’re unsure whether it’s included, contact your account manager.
Your Waillo chatbot has been configured in the Staff App. The steps in this guide assume your chatbot is already set up and ready to use.
Access to your website’s HTML (or the ability to add scripts via a tag manager)
Your WaitWell Site ID — found in Settings > Customer Site/App > Customer Site Settings
Your Waillo Bot ID — found on the Chatbots page in the Staff App
Include the Required Files
Add the following two lines to every web page where you want Waillo to appear. These should be placed inside the <head> or just before the closing </body> tag:
<link rel="stylesheet" href="https://cdn.waitwell.ca/chatbot/waitwell-chatbot.min.css">
<script src="https://cdn.waitwell.ca/chatbot/waitwell-chatbot.min.js"></script>
Note: These files must be included on every page where you want the chatbot widget to appear.
Initialize the Chatbot
After including the files above, add the initialization script with your account details. This should appear after the script tag from Step 1:
<script>
WaitWellChatbot.init({
apiUrl: 'https://api.waitwell.us',
siteId: '402401',
botId: 123,
enableBooking: true
});
</script>
Note: Your botId can be found on the Chatbots page in the Staff App. If botId is set to null, the chatbot widget will be hidden.
Embedding Complete
Once both steps are complete, the Waillo chatbot button will appear in the bottom-right corner of your web page by default. Visitors can click it to open the chat, ask questions, and book appointments if enabled.
Configuration Options
You can customize Waillo’s appearance and behaviour by passing additional options into the WaitWellChatbot.init() call. The table below describes all available options:
Option | Type | Default | Purpose |
| string | required | API base URL |
| string | required | Your WaitWell Site ID |
| number | null | Chatbot ID — found on the Chatbots page in the Staff App (null = hidden) |
| boolean | true | Allow customers to book appointments through the chatbot |
| hex | #3880ff | Primary brand color |
| hex | #0cd1e8 | Accent/secondary color |
| string | bottom-right | Widget position on the page |
| number | 9999 | CSS z-index for layering |
| string | "Hi! How can I help?" | Greeting message shown when chatbot opens |
| string | "Type your message..." | Placeholder text in the message input |
| string | en | Language setting (en, fr, es) |
Full Example with Custom Options
Below is an example of a fully customized initialization:
<script>
WaitWellChatbot.init({
apiUrl: 'https://api.waitwell.us',
siteId: '402401',
botId: 123,
botName: 'Waillo',
enableBooking: true,
primaryColor: '#3880ff',
secondaryColor: '#0cd1e8',
position: 'bottom-right',
welcomeMessage: 'Hi! How can I help?',
placeholder: 'Type your message...',
locale: 'en'
});
</script>