|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

 

Configure the script

The CTA can be configured with below listed keys. All settings go in to the setConfig command (see example at "Add the script to the webpage"). For this documentation we have divided settings in to 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)
 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
 
 

Image 1:

Screenshot_2019-03-28_at_10.26.17.png

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.

 

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
addDefaultTexts boolean no Use default translations provided by Freespee (en, fr, sv)
defaultLocale string no Default language to use if the user preferred on 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

 

 

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 the API in your own javascript.

Example code in your own javscript:

javascript
window.__fs_button("setConfig", {
  "customerId": "123",
  "phoneNumber": "+463390xxx",
  "button": document.getElementById("call-to-action"),
  "displayPhoneNumber": "always",
  "displayCallback""always",
  "callbackAnsweringNumberId": "1",
  "callbackCallerId": "+46701231xxx",
  "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.

 

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>

Can't find what you're looking for?