VSD Buttons

This article explains how to setup VSD Button as a Dialer to initiate calls or live chat requests.

What is a VSD Button? #

VSD Button is a chatbot-like widget (floating button) you might have come across on different business websites. It is a similar floating button that can be added to your website or application or to specific pages of your website.

A few advantages of using a VSD Button on your website:

1. Enables features like voice and video calling, live chat, screen sharing, file sharing on your website.

2. Your website visitors can be sitting anywhere in the world, no call charges apply.

3. Prospective customers never have to leave your webpage. Not even to pick up their phone to dial a number.

4. Works across all devices be it phone or laptops or desktops.

5. Supports advanced call routing. You can route calls from the different pages of your website to different teams/agents directly.

6. You can collect the details that you need with custom contact forms.

7. All the enquiries are organized and saved in the call history.

Example: Visit https://videoservicedesk.com and look at the bottom right corner for the VSD button.

Setting Up VSD Button #

1. Login to the Video Service Desk dashboard as an admin.

2. Go to the Dialers section.

4. Here you can see the list of all the Dialers and their details. Now let's go on to edit one of these Dialers.

5. Once you click Edit, you will be able to see the different Dialer Types. In the Basic Details tab, note the Client and Client Location for this Dialer to make sure you are adding it to the correct website.

6. Go to VSD Button tab.

7. You should see a page as shown below.

8. On the left, you can see a code snippet to add VSD Button to your web pages.

9. Download this code snippet by clicking on the Download Snippet button. Add it before the ending body tag of the web pages where you want the VSD Button to appear.

Customize Button Design (Optional) #

You can also customize the look and feel of the button if you want. Simply start editing the code snippet in the editor. Change the values for the different data attributes as explained below.

Reset button at the top resets the code snippet to the original.

Run button can be used to see your changes on the right.

• data-alignment: Aligns the button to the right or left bottom corner of your web page. Values allowed: ["right", "left"]

• data-heading: Modifies the heading that appears when you click the VSD Button.

• data-text: Modifies the text that appears right below the heading.

• data-button-radius: Alters the size of VSD Button.

• data-button-color: Changes the color of the VSD Button based on the color HEX code. Remember to add the # symbol.

• data-button-ripple-count: A blinking button can grab the attention of the customer. Use this attribute to control the number of times a button blinks. Allowed values: []"1", "2", "3" …. , "infinite"]

• data-button-ripple-type: For ripple visibility. Use dark for a website with light colored background and light for a website with dark colored background.

• data-button-ripple-after: Button starts blinking only after the website visitor has spent this much time (in milliseconds) on your page.

• data-button-z-index: Increase this to a high value if the button gets hidden below other elements of your web page.

• data-button-icon-color: Color of the support agent icon inside the button.

• data-button-icon-size: Size of the support agent icon inside the button.

• data-button-side-spacing: Shortest distance (in pixels) from the edge of the web page to the button.

• data-button-bottom-spacing: Distance (in pixels) from the bottom of the web page to the button.

• data-form-height: Height of the contact form when VSD Button is clicked. 90vh roughly translates to 90% of the page height.

• data-form-width: Width of the form when VSD Button is clicked.

• data-form-border-radius: Curve radius of the corners of the contact form. 0px has the sharpest corners.

• data-heading-font-size: Heading font size.

• data-heading-font-color: Heading font color.

• data-text-font-size: Text font size.

• data-text-font-color: Text font color.

• data-token: Do not modify this value.

Finally, download this code snippet by clicking on the Download Snippet button.

Note: Your modifications will be lost and the code will be reset once you close the browser. Please download the code snippet before you sign out.