GETTING STARTED

Introduction

Webcall works by connecting two agents to make a call, the public user Agent (caller) and the private user Agent (receiver). The public user on your website makes a call to the private users on your device.

When configuring the widget on your website, make sure you specify the public username and password, then provide a list of private users and their labels.

Quick Config

  • Add a link to the SDK to the header of your website:
     <script src="https://cdn.webcall.ringitconnect.com/web/widget/beta/webcall.js"></script>
  • Copy and past the following config to the footer section of your website. 
    <script>
    var config = {
        username: 'caller_agent_name', // Change the options to match your public agent.
        password: 'caller_agent_password',// Change to your public agent password
        callToNumbers: [
            // Change the name and value to match your private agent label and username.
            {name: 'Receiver Agent 1 Title', value: 'reciever_agent_1_number'},
            {name: 'Receiver Agent 2 Title', value: 'reciever_agent_2_number'},
        ],
        uiConfig: {
            primaryColour: '#FF0006', // Set  your primary color
        },
        alignment: 'right', // (Optional) you can change alignment to left default is right.   
    }
    var click2callphone = new ringit.click2call(config);
    click2callphone.build();
</script>
  • Change the parameters of the config such as the caller agent (username and password), alignments and the receiver agents title and usernames.

Configuration

Configuration is passed as an object whose properties define the behaviour of the widget. The configuration has five properties that each defines how the widget looks and behave i.e username, password, callToNumbers, availableHours, uiConfig, and alignment.

Below shows the behaviour of the config object properties and how to assign values to them.

username

Username: The value of this property is a string of the username. The username is the public user agent that calls the private user agent. This property can be obtained from the public user agent section of the dashboard under users. 

<br />username: 'caller_agent_name',<br />

password

Password: The password is the password of the public user agent. The password authorizes the public user as valid.

<br />password: 'caller_agent_password',<br />

callToNumbers

This is an array of object that contains the private user agent and it label displayed in the UI. The private user agent receives the calls from the public user agent, you should ensure the proper usernames are passed as parameters. The format of this config is: 
callToNumbers: [
            {name: 'Receiver Agent 1 Title', value: 'reciever_agent_1_number'},
            {name: 'Receiver Agent 2 Title', value: 'reciever_agent_2_number'},
        ],

UI CONFIGURATION

Properties

The uiConfig property contains an object with properties that specifies overrides for some part of the UI such as text, images, text on buttons, etc. The List of properties and how it affects the UI can be found below. primaryColour: Changes the primary colour of the widget. secondaryColour: Changes the secondary colour of the widget callAccessText: Changes the text on the call designation page welcomeText1: Changes the first welcome text welcomeText2: Changes the second welcome text. button1Text: Changes the text on the lead generation action button button3Text: Changes the text on the button in the call designation page. The format of this config is: 
uiConfig: {primaryColour: '#c300ff',

secondaryColour: '#143ad1',

callAccessText: 'Pick your nearest location',

welcomeText1: 'Contact Us!',

welcomeText2: 'How may we serve you?',

button1Text: string,

button3Text: string,

},

Alignment

The alignment property specifies the position of the widget on the UI. Its value can be left or right. 
alignment: 'right',