The following article explains how to configure and add the CTA to a webpage.
The following three steps need to be followed:
- Configure the script
- Add the script to the webpage
- Add a button to launch it
1. Configure the script
The CTA can be configured with the below-listed keys. All settings go into the setConfig command (see example at "Add the script to the webpage"). For this documentation we have divided settings into three different categories:
- General settings
- Text settings
- Javascript callback settings
General Settings
| name | type | required | description |
| customerID | string | yes | customer id |
| button | HTML Element | yes | User clicks this element to trigger the widget |
| phoneNumber | string | yes | Phone number to replace in e164 format |
| displayPhoneNumber | VisibilityConfig | no | When to display phone number |
| displayCallback | VisibilityConfig | no | When to display callback form |
| scheduleTimezone | string | yes | The timezone of the opening hours below |
| openingHours | OpeningHours | yes | Opening Hours |
| closedDays | string [ ] | yes | Days on which opening hours will be ignored |
| callbackAnsweringNumberId | string | yes | The placement of the number (#1) in the subcustomer setting/ tracking and call widget/ allowed numbers. See image 1 below |
| callbackCallerId | string | yes | Answering number ID |
| colors | ColorConfig | no | Customize primary and secondary colors |
| agentImage | string | no | Url to where the image of an agent is hosted |
| customLogo | string | no | Url to where a custom logo is hosted |
| showinternationalCallingCode | boolean | no | show country code in the displayed phone number (073 11 22 345 --> +46731122345) |
| showLocalPhoneNumber | boolean | no | Show the phone number in local format. This overwrites showInternationalCallingCode. If the number has no local format for any reason, it will be shown as the formatted one. The phone numbers default is international (+XY). |
| userCountryCode | string | no |
String to show pre selected country code in phone input. If not provided, will default to the default locale, fallback texts or user browsers language settings if no match |
| retries | string | no |
Used to specify the number of times the CTA will attempt to make the call if the first call fails. Default is 0, Options: 0-3 |
Image 1:
Explanation of config object for General Settings:
VisibilityConfig can be any of "always" / "never"/ "open"/ "closed", where "open"/"closed" represents company is open/closed for business.
ColorConfig must include "primary" & "secondary", where "primary" represents the color of the top background and selected time slots and "secondary" is used for the main buttons.
CallbackScheduleWidgetConfig has the interface:
| Name | Type | Required | Description |
| amountOfDaysToDisplay | integer | no |
Number of days to include in the slot selection schedule (defaults to 4) |
OpeningHours has the interface:
| Name | Type | Required | Description |
| schedule | schedule [ ] | yes | List of schedules representing the opening hours |
Schedule has the interface:
| Name | Type | Required | Description |
| daysOfWeek | integer | yes | Binary representation of affected days |
| from | string | yes | Starting time of schedule, in "HH:MM" format |
| to | string | yes | Ending time of schedule, in "HH:MM" format |
| exclude | ExcludeObject [] | no | A list of intervals with times that are not bookable |
ExcludeObject has the interface:
| Name | Type | Required | Description |
| from | string | yes | From when to start excluding times, in "HH:MM" format |
| to | string | yes | From when to stop excluding times, in "HH:MM" format |
Text settings
| Name | Type | Required | Description |
| texts | Locales | no | Custom settings for texts |
| defaultLocale | string | no | Default language to use if the user preferred one is not available |
Locales:
Locales can be any language key ('en-gb', 'sv-se' etc) together with the customizable keys.
Example in config
"en-gb": {"A_KEY": "A value"
}
Bellow are the supported keys in the CTA that can be customized by replacing the associated values.
| Text Options |
| "texts": { "en-gb": { "CLOSE": "Close", "CALLBACK.NO_TIME_SLOT_FOUND": "No schedulable times found", "CALLBACK.AT": "at", "CALLBACK.CLOSED_MESSAGE": "Our phone lines are currently closed, but you can schedule a phone call with us", "CALLBACK.CTA_BUTTON": "Schedule a call", "CALLBACK.CTA_BUTTON_LABEL": "Would you rather we called you back?", "CALLBACK.FORM.PHONE_NUMBER": "Your phone number", "CALLBACK.FORM.PHONE_NUMBER.INVALID": "Invalid phone number", "CALLBACK.GENERIC_ERROR.TEXT": "An error occurred. Please, try again!", "CALLBACK.INTRO_TEXT_OPEN": "It currently takes less than 30 seconds to speak to us", "CALLBACK.INTRO_TEXT_CLOSED": "Let's pick a time that suits us both", "CALLBACK.QUICK_CHOOSE.CTA": "Pick any time", "CALLBACK.QUICK_CHOOSE.OPTION.ASAP": "As soon as possible", "CALLBACK.QUICK_CHOOSE.OPTION.TOMORROW_MORNING": "Tomorrow morning", "CALLBACK.QUICK_CHOOSE.TITLE": "When should we call you back?", "CALLBACK.SPECIFIC_TIME.CTA": "Pick specific date and time", "CALLBACK.SPECIFIC_TIME.AT": "at", "CALLBACK.SPECIFIC_TIME.ON": "on", "CALLBACK.SPECIFIC_TIME.TITLE": "Call me back", "CALLBACK.SPECIFIC_TIME.BUTTON.CANCEL": "Cancel", "CALLBACK.SPECIFIC_TIME.BUTTON.CONFIRM": "Confirm", "CALLBACK.CONFIRMATION.TEXT": "We will call you back", "CALLBACK.CALL_SCHEDULED_SUCCEEDED": "All good!", "CALLBACK.CALL_SCHEDULED_PERFORMED": "You have scheduled a call", "GREETING.OPEN": "We are looking forward to your call", "GREETING.CLOSED": "We will be back at {time} on {weekday}", "GREETING.NUMBER_PLACEHOLDER": "Sorry, we are closed", } } |
Javascript callback settings
|
Name
|
Type
|
Required
|
Description
|
|---|---|---|---|
| onOpen |
() => any |
no |
Called when CTA is opened |
|
onClose |
() => any |
no |
Called when CTA is closed |
|
onCallbackBooked |
(data) => any |
no |
Called when Phone Callback has been booked |
interface CallbackResponseSuccess {
status: PlacementStatus;
call_uuid: string;
}
onCallbackBooked non-successful response from Kaisa will be:
interface CallbackResponseFail {
status: PlacementStatus;
errors: Array{
phonenr: string;
};
}
2. Add the script to the webpage
- Load the script from http://cdn.freespee.com/phone-cta/production/app.js by including it on your page.
- Config and display the widget using your own javascript.
Example code in your own javascript:
window.__fs_button("setConfig", {
"customerId": "123",
"phoneNumber": "+463390xxx",
"button": document.getElementById("call-to-action"),
"displayPhoneNumber": "always",
"displayCallback":"always",
"callbackAnsweringNumberId": "1",
"callbackCallerId": "+46701231xxx",
"retries":"2",
"scheduleTimezone": "Europe/Stockholm",
"colors": {
"primary": "red",
"secondary": "#01cdb7"
},
"customLogo": 'https://linktowhereistorelogo.com/logo.png',
"closedDays": [
"12-24"
],
"openingHours": {
"schedule": [
{
"daysOfWeek": 31, // Monday to Friday, based on binary 0011111
"from": "10:00",
"to": "17:00",
"exclude": [{
"from": "12:00",
"to": "13:00"
},
{
"from": "15:00",
"to": "15:30",
}] // Removes all times from 12:00 to 13:00 and 15:00 to 15:30 from being bookable Monday to Friday
}
]
}
}); Please note that this snippet does not include all customizable keys. See "Configure the scripts" for all available options.
3. Add a button to launch it
The CTA needs a HTML element to hook up against to know where to launch itself. This element should be provided by adding a selector for the element as the "button" option in the configuration. In the example script above, we use a button with the id "call-to-action". The HTML for this button would look like this:
Button for CTA to hook in to
| <button id="call-to-action"> Call us </button> |
Comments
0 comments
Please sign in to leave a comment.