How do I implement a social chat toolbar in my website?

To add the social chat toolbar to your website click on the following tabs:
1. Tab: Admin
2. Tab: Code
3. Click on Toolbar button, which will open the Toolbar builder

You can add several toolbars to your website, and customize each toolbar separately.

 

Tab “Position”

• Location: choose where the tab should appear on your website. You will be able to see the preview in real time.
• Margin: depending on the location type, you can set up left, right, top or bottom margin.
• Popup size: set up the size of the popup window.
• Bar thickness: you can set up custom thickness for the toolbar.

 

Tab “Style”

• Background color: choose the background color from the list or palette, or enter a custom color number.
• Text color: choose the text color from the palette, or enter a custom color number.
• Gradient: you can enable gradient effect for the background color.
• Rounded corners: enable or disable rounded corners for the toolbar to correspond to your website design.
• Text font: choose the text font from the selection.
• Text direction: set up the order of a text and an icon on the button.

Tab “Buttons”

There is a selection of buttons for the toolbar. It includes a chat button, email, Twitter, Facebook, call, and custom buttons.

 

Chat and email buttons:

Here you can set up the appearance of the chat and email buttons. They have similar options.

• Button: you can show the button or hide it from the toolbar, or it can be automatically hidden when all operators are offline.
• Caption: here you can enter a name for the button, or leave it blank to use an icon without text.
• Tooltip: tooltip is a piece of text that visitors can see when they hover the cursor over the button.
• Icon: you can select an icon from the library or upload your own icon. Choose “none” if you wan to use the text only.
• Width: set up custom width for the button or leave the default parameter.

Note: To set up an email address for the “email” button, go to “Settings” —> “Email to collect left messages and transcripts”.

Twitter:

Here you can add your twitter feed to the toolbar.

• Button: choose to show or hide the button from the toolbar.
• Caption: enter a name for the button, or leave it blank to use an icon only.
• Tooltip: tooltip is a piece of text that visitors can see when they hover the cursor over the button.
• Icon: you can select an icon from the library or upload your own icon. Choose “none” if you wan to use the text only.
• Width: set up custom width for the button or leave the default parameter.
• Widget HTML code: to add your Twitter feed to the toolbar, you need to add the widget to your Twitter account.
  Instruction: log in to your Twitter account, go to “Settings” —> “Widgets” (https://twitter.com/settings/widgets) and create a new widget. Copy the HTML code of the widget from you Twitter account, and paste it to the “Widget HTML code” box in your HelpOnClick live chat account.
• Account ID: fills in automatically when you enter the widget HTML code.
• Widget ID: fills in automatically when you enter the widget HTML code.

 

Facebook:

Here you can add your Facebook feed to the toolbar.

• Button: choose to show or hide the button from the toolbar.
• Caption: enter a name for the button, or leave it blank if you want to use an icon only.
• Tooltip: tooltip is a piece of text that visitors can see when they hover the cursor over the button.
• Icon: you can select an icon from the library or upload your own icon. Choose “none” if you wan to use the text only.
• Width: set up custom width for the button or leave the default parameter.
• Facebook ID: select the “Get from settings” option if you want to add the account that is specified in the settings (“Settings” —> “Facebook ID”). Or select the “Override” option to add another account.

 

Call:

The call button allows website visitors initiate a Skype call.

• Button: choose to show or hide the button from the toolbar.
• Caption: enter a name for the button, or leave it blank if you want to use an icon only.
• Tooltip: tooltip is a piece of text that visitors can see when they hover the cursor over the button.
• Icon: you can select an icon from the library or upload your own icon. Choose “none” if you wan to use the text only.
• Width: set up custom width for the button or leave the default parameter.
• Skype login: enter your Skype login for the account that will be used to receive calls.
• Show when: you can schedule the call-center working hours. The button will be hidden during the offline hours.

Custom:

You can add up to three custom buttons to your toolbar. They can include custom links, some text or an inline frame.

• Button: choose to show or hide the button from the toolbar.
• Caption: enter a name for the button, or leave it blank if you want to use an icon only.
• Tooltip: tooltip is a piece of text that visitors can see when they hover the cursor over the button.
• Icon: you can select an icon from the library or upload your own icon. Choose “none” if you wan to use the text only.
• Width: set up custom width for the button or leave the default parameter.
• Content type: select a content type for the button: text, link to a page or inline frame. For the text type, enter a text in the box below. For the link and iframe types, enter a URL.

 

Tab “Invitation”

Here you can set up a type of an invitation to engage visitors to chat.

Invitation types:

• • “Pop-up with image and text”
    Shows a picture of an operator (or company logo) and some call-to-action text. You can use the default image, or add your own. To use your own image, you need to upload it or specify the image URL.
    “Styles” option: choose the colors for the invitation box to fit in your website design. Click on the “Preview” button to see the result.
    To edit the invitation text, click on the “Customize” tab of the main menu, and edit invitation texts and rules on the “Invitation window” page
    

 

• “Custom image”
  Is an eye-catcher that informs visitors about the chat option, and invites them to start a session. You can select an eye-catcher from the library, or upload your own.
  Note: All the invitation rules from the “Invitation window” settings (under the “Customize” tab) apply to the eye-catchers.
  

 

Click on “Save & get code” button.

 

Copy the block of code under “Get Code” and place it on your website, anywhere between the <body></body> tag (best to place just before </body>)”. If you want to set up several toolbars, copy and paste the code for each toolbar.