WHAT IS THE EMBED LINK?
Developers can create custom links to access the Oct8ne coviewer. This allows you to have more flexibility when adding visuals to your website to make it attractive and encourage your potential customers to contact agents for advice and help during the buying process.
When agents, whether people or bots, are connected, all DOM elements marked with the CSS class "oct8ne-widget-on" will be visible. There is no limitation on the type of HTML element or its location on the page — this class can be applied to images, HTML blocks such as DIV or SPAN, or any other type of tag and can be placed where they look best on the web. The following code shows such an element and can be customized by modifying the styles inline:
|
<body> ... <div class="oct8ne-widget-on" position: fixed; top: 0; right: 0; z-index: 9999"> Talk to an expert </div> ... </body> |
When the user clicks on any of these items, the Oct8ne coviewer will open to start a chat with the agent that is currently available.
|
|
Note: Make sure these elements are in invisible mode on the page using the line styles and CSS sheets. You should set its style to display: none. Oct8ne will only show them if it detects connected agents. |
Similarly, when there are no agents connected, Oct8ne will display all elements in which the CSS class "oct8ne-widget-off" appears. The following code contains an example of an implementation of this link on the page and its customization through the stylesheet:
|
HTML: ... <div class="oct8ne-widget-off"
id="no-agents"> ... </body> display: none; position: fixed; z-index: 9999; right: 0; top: 0; } |
|
|
Note: Make sure these elements are in invisible mode on the page using the line styles and CSS sheets. You need to set its style to display:none. Oct8ne will only display them if it detects UNAVAILABLE agents. |
|
<body> ... <div class="oct8ne-widget-on" style="display:
none"> <div class="oct8ne-widget-off" style="display: none"> Email us </div> ... </body> |
These classes can also be combined into the same element to make it visible regardless of whether the agents are available or not, with the same text and functionalities:
|
<body> ... <div class="oct8ne-widget-on oct8ne-widget-off"> Talk to us! </div> ... </body> |
|
|
Note: In order for this development not to conflict with the icon that Oct8ne provides by default, you will need to turn off the default widget from the Oct8ne control panel. In the Settings > Engagements section > Livechat
|
DISTINGUISH BETWEEN PHYSICAL AGENTS (people) AND BOTS
If we are interested in customizing the message and behavior based on the availability of agents, distinguishing between people and bots, Oct8ne provides additional CSS classes for this.
The following table summarizes these classes, as well as when Oct8ne will make elements that use them visible:
|
CSS Class |
Shown only when... |
|
oct8ne-widget-agents-on |
Physical agents (people) are available |
|
oct8ne-widget-agents-off |
There is no availability of physical agents (people) |
|
oct8ne-widget-bots-on |
Bots are available |
|
oct8ne-widget-bots-off |
No bot availability |
|
|
Note: If you use any of these classes, make sure these elements are in invisible mode on the page using the CSS line styles and sheets. You need to set its style to display:none. |
The following block of code shows an example of using these classes to display different messages depending on the availability of people or bots:
|
<body> ... <div class="oct8ne-widget-agents-on" style="display: none"> Talk to a sales person </div>
<div class="oct8ne-widget-bots-on" style="display: none"> Talk to our bot! </div> ... </body> |
Please contact support@oct8ne.com if you have any questions.