Tutorial
Initial configuration
Phone number
You can select a phone number from the United States or United Kingdom. We offer most of the area codes in either country.
When a customer dials the number the call will be answered by the bot.
If you need additional numbers you can purchase them later from the Settings/Phone numbers menu. If you need numbers from countries other than the US and UK please contact us at sales@callto.net, we can offer numbers from more than 60 countries.
Choose calendar type
When you choose the “open” type all the future slots starting from now are open for booking. When a customer makes a reservation through the system (either phone or chat) the slot is marked as taken. If you receive a booking outside of the system you need to enter it manually.
If you already have bookings you can select the “closed” type which marks all the future slots as closed. Then you need to manually mark which of the slots are open for booking.
You can switch between the types at any time after you decide which suits you best.
Welcome menu (phone booking only)
This is the first menu played when the call to your phone number is answered. After the initial greeting the bot will play the menu options.
You need to decide which of the menu options will be available to callers. To do so click on the menu component and when expanded, check which of the inputs will be available to the caller.
By default all are enabled:
-
connect to operator - connects with the Call answering group,
-
leave a message,
-
choose dates - starts the reservation process.
You can notice that when you disable or enable any of the menu options the text below will change.
This text is what will be played to the caller.
You can modify this text freely, just the menu input numbers have to stay the same as they determine the next action. Instead of choosing a number from a keypad a user can just say the number or say a corresponding word like “reservation”, “reserve”, “booking” or “receptionist”, “operator” etc. The words are preprogrammed.
Employees
In this step you can add employees. Simply type a person’s name and optionally phone number and email (after a space) and press enter. Employees can also be added later from the Company menu.
Offered services
Switch to Yes if you offer more than one service, e.g. Men haircut, Women haircut etc.
Click the plus button and enter the name of the service in the label field. Then its duration - min duration interval is 15 min. In addition you can add more words that will trigger this choice when spoken by the caller. If you want to add another service click the plus button again.
You can modify the announcement text which is played to the phone callers only. The ~ sign denotes a pause. For example if you want a one second pause before playing the service name enter ~1
Calendar resources
In this step enter the total number of calendars, i.e. how many bookings can be accepted for the same time slot. For example if you have 5 chairs in a barber saloon enter 5. If you can offer 4 basic massages and 2 longer ones enter 6. The system will create a sub-calendar for each of the resources. The sub-calendars will be filled with new bookings independently.
When you provide a number the system will create the resources with default names as shown below.
If you want to change the name just click on its item and change the text in the text field below. The names are not shown to the customers, they are presented only in the portal in the Calendar view.
If you need to add more resources click on the plus button. You can also remove unwanted resources.
Services
In this step you assign resources to services. By default all services share all the resources. You have to define which service needs which resource.
In our example both haircut and head shave can be offered on the same chairs. So if you have two chairs you can select both for each of the services. If for some reason a haircut can be rendered only on the first chair named Res1 then check only this option from the resources list.
Let customers select a person
As an option you can allow customers to choose a person who will render the selected service. For example if a customer wants a certain person to do the haircut. First you need to enable this option for the haircut service. Click the haircut box and then set the “customer can choose a person” switch to Yes.
In the “Employees assigned to the selected services” field start typing the employee name. You should see the list of all the employees (they need of course be added earlier).
Once you assign persons for a service you can modify the voice announcement. By default it simply says the first names of the persons. You can modify the prompt, only have in mind that the caller will have to say the name of the person - for example Chris for the bot to recognize the choice.
Working hours
The last important step is to set your business hours. The bot will not accept any bookings beyond these times. Click a day and then set the opening and closing times. If you want to set the whole day off, for example Sunday, then click Sunday and click the remove (x) button to remove times completely.
Different after hours menu
If you want to have a different announcement after the working hours set the switch to Yes and then you can modify the text. The announcement refers to the menu which you set in the first step of the wizard. You can modify it for example by removing the option to connect to the operator.
Working hours
This menu contains additional calendar settings.
In the above field enter the name of the teams that should be receiving an email notification on all the reservation related events such as new reservation, cancelled reservation, confirmed reservation.
Start typing the name and it should show you the teams in the drop down menu.
The teams can be defined in the Company menu
Booking reminder
Check this option if you want the bot to call customers one day before their bookings. A customer will be asked to confirm or cancel upcoming reservations.
If the system fails to connect to a customer then it can send an SMS. You can enable this option and modify the reminder text.
Voice greetings
You can modify some of the pre-recorded voice prompts. When changing the text do not change the parts in square brackets as they are variables which will be replaced by the bot during a call.
Phone numbers
In this menu you can manage your phone numbers. By default you have one phone number included in the subscription. If you need additional numbers you can purchase them from here. All of them will be answered by the same bot’s scenario.
Chat bot configuration
The chat bot uses the same calendar settings as the phone bot, there are however some differences that require separate configuration. They are described below.
In order to configure the chat bot click the Chat bot menu and then Settings.
Adding chatbot widget to your website
To add the bot widget you need to add several lines of code to your html page. Go to the Access & direct link menu, then expand the “Install code on your website” element. You will see the html code, copy it and paste into the end of the body section of the html page where you want the bot to be shown.
<div id="live_chat" data-scenario="schedule"/>
<script src="https://js.callto.net/dash/lc_main.js"></script>
<script src="https://js.callto.net/dash/static/js/one.chunk.js">
</script><script src="https://js.callto.net/dash/static/js/two.chunk.js"></script>
When you reload the page the bot script should be downloaded and run. Before you see the bot you need yet to add your website URL to the allowed hosts.
Allowed hosts
You will find this section in the Access & direct link menu. When you add the bot widget to your website we need to be able to authenticate the requests coming from the widget and associate them with your account.
To add the URL type your website full address including https:// in the text field and press enter. You can add up to 5 different addresses.
If you added the code to your html page now you can reload it and you should see the widget. By default in its minimized form as a button with message. That behaviour can be changed as explained in further sections.
Bot’s link and QR code
In this section you can create a unique, direct link which opens your chat bot directly. On mobile devices it will cover the full size of the screen, on desktop it will be positioned in the center.
The link can be published in your marketing materials, sent via email to your customers or published in your digital ads.
Type your company short name or any other name that will be the first part of the url. The name cannot be shorter than 5 and longer than 30 characters. The full url will be shown below the text field. The url is created in the callto.net domain.
In addition the portal will generate a QR code containing the URL. You can display it on your marketing materials, once scanned it will open the url.
Adding online booking to Google Maps and the google search results (Google My Business)
If your company has a profile in Google My Business you can enable appointments link which will be shown as in the picture below in both search results and map places.
To add the link go to your Google My Business account and find the Update service availability section.
To add the link go to your Google My Business account and find the Update service availability section.
Put there your direct link to the chat bot. If you do not have one you can quickly create one in the Access & direct link menu.
Allow Google up to 3 days to review and approve the changes to your GMB listing. In some instances, the change may appear immediately following the update.
Bot properties
The below configuration is only for the chat access. It does not affect any settings of the phone bot.
-
Greeting
This is the welcome greeting - first message sent to the customer. Usually a text explaining that a customer can make a reservation or request a call etc.
-
Scheduler bot initial query
This property defines how the bot starts the reservation process. You can choose one of two options:
-
query sent to the bot,
-
text shown to a visitor
The query sent to the bot can be:
-
soonest,
-
this week,
-
next week
If you choose for example “soonest” the customer will see the bot’s response as if the customer himself asked for the soonest slots.
The same for this or next week, the bot will receive the selected query as if it was coming from the customer and will respond with available dates.
If you choose the “Text shown to a visitor” option the reservation process starts with a message that contains the header text and the suggestions menu (quick replies). In our example above the suggestions are “this week”, “next week”. Below is what it looks like in the chat widget.
-
Visitor details
This property determines what details we want to receive from the customer. This is only for new customers as the bot can recognize the returning ones.
The bot asks for this information at the end of the reservation process, after selecting a slot.
Other widget properties
-
Speech
You can enable/disable the chat client speech capabilities. By default both the speech to text and text to speech are enabled.
When enabled a customer will see the audio buttons in the message box. They are off by default. A customer can turn on the speaker to make the chat client play the incoming messages as speech.
If the mic option is on the customer can talk and the widget will convert the speech to text and send it as a message to the reservation bot.
-
When to open the chat window
By default the chat widget on your website starts in its minimized version i.e. as a button or a button with message. Here you can change this behaviour. When the Show on start option is selected the chat widget will open its conversation window immediately when the page loads. You can also set some delay and open the chat window after several seconds.
Or you can leave as it is by default and show only the button and the chat window only when the customer clicks the button.
-
Service details
The offered services are created in the main Settings menu where you specify their names, durations and other calendar related parameters. In the Chat bot/Services menu you can add more details on each service which will be shown during a chat session only, they are not presented during a phone conversation.
The details include:
-
picture illustrating the service,
-
description,
-
price or price range
All of the details are optional.
Below is how the service choice looks in the chat widget.
-
Showing persons avatars in chat
If you have the person choice enabled for a service the chat bot will show the persons names with their avatars if available. To add an avatar to a person go to the Company menu (in the portal’s left panel) and there click a user in the Users table. In the Edit user panel expand the Details and there you can upload the picture.
The chat widget view below.
Connect to operator (phone)
During a phone call a customer can request a connection with a person by saying one of the words triggering this action which are “operator”, “receptionist”. The bot will start calling the users from the group Call answering. It will call their phone numbers simultaneously.
The Call answering group is created by default and contains the admin user. You can add or remove users to this group from the Company menu - Users section.
Click a user and then in the Edit user panel expand the details.
Start typing the group name, in this case Call answering and then choose it from the drop down list and press enter.
Connect to operator (chat)
At the moment the chat widget does not support voice calls, instead it uses a callback request when a user wants to talk to an operator.
The bot will ask for a phone number and when to call back (it is optional). The callback request is sent via email to all the users that belong to the Call answering group. How to add a user to this group is explained in the previous section.
To configure the Connect to operator in chat go to the Chat bot menu, then Settings and then expand the Bot properties section and click Connect to operator.
You can change the texts and set whether a customer should be asked for a time to call or not. You can also set the time range in which a customer can request the call back.
Chat client look customization
Almost all of the elements of the chat widget can be modified by the use of css styling. To start, go to the Chat bot menu and then the Look tab.
Load design from template
The default chat look is based on the Blue template. If you do changes and want to come back to the initial look you can always click load from the template button. In near future we are going to add some more templates with different looks.
Mobile and Desktop view
The chat client is displayed differently on mobile screens than on desktop. On mobile screens it takes the whole screen whereas on desktop it is displayed in the center. Therefore there are some differences when it comes to sizes of some of the elements, border and the header look.
At any moment you can switch between the mobile and desktop look by clicking the Switch to… button.
Initial view
The first tab is for the Initial View. It is the minimized form how the chat client starts.
The position on page property allows you to set where, in which corner, the button will be shown.
Main view
In this section you can change the look of the main chat components. If you want only to change some of the colors probably it will suffice to use the Colors section.
If you need the access to more advanced styling options click the Show CSS editor button.
You will see the list of all styled elements. When you click an element from the list it should highlight a corresponding element in the chat window on the right. If you do not see it you may need to scroll the chat list. Also when you click on an element in the chat window it should highlight the corresponding entry in the css editor. Again, if you do not see it try to scroll as the selected element may be beyond the visible area.
When you expand an item in the editor you will see the styling attributes. You can modify them, remove or add new ones.
CSS Editor
