|Help Centre

How to implement CTA

Last updated at

The following article explains how to configure and add the CTA to a webpage.

The following three steps need to be followed:

  1. Configure the script 
  2. Add the script to the webpage
  3. 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:

  1. General settings
  2. Text settings 
  3. 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 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": {
"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.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.TITLE": "When should we call you back?",
"CALLBACK.SPECIFIC_TIME.CTA": "Pick specific date and time",
"CALLBACK.CONFIRMATION.TEXT": "We will call you back",
"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


() => any


Called when CTA is opened


() => any


Called when CTA is closed


(data) => any


Called when Phone Callback has been booked

onCallbackBooked successful response from Freespee will be:
interface CallbackResponseSuccess { 
status: PlacementStatus;
call_uuid: string;


onCallbackBooked non-successful response from Freespee will be

interface CallbackResponseFail {
status: PlacementStatus;
errors: Array{
phonenr: string;


2. Add the script to the webpage

  1. Load the script from http://cdn.freespee.com/phone-cta/production/app.js by including it on your page.
  2. 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",
  "callbackAnsweringNumberId": "1",
  "callbackCallerId": "+46701231xxx",
  "scheduleTimezone": "Europe/Stockholm",
  "colors": {
    "primary": "red",
    "secondary": "#01cdb7"
  "customLogo": 'https://linktowhereistorelogo.com/logo.png',
  "closedDays": [
  "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>

Did you find this article helpful?

Gold StarGreen LightYellow LightRed Light

Powered by Customer Thermometer

If you still need help you can ask our Support team