Oct8ne custom widget design
These instructions are intended for people with a basic understanding of web programming languages: HTML and CSS. If this doesn't apply to you, we recommend contacting your developers and providing them with these instructions. Installation will be very easy for them.
WHAT DOES CUSTOM DESIGN OR EMBEDDED LINK CONSIST OF?
Developers can create custom elements to access the Oct8ne viewer. This allows for greater flexibility in making the element or call-to-action button that opens the conversation more appealing, encouraging potential customers to contact agents/bots for advice and assistance during the buying process. You can customize this element with your own CSS and give it the look and feel that matches your website.
To do this, you need to add an HTML element to your page with a specific class.
There are no limitations 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 they can be placed wherever you want on your website, as the control is exclusively yours.
WHICH CLASSES SHOULD I USE?
“oct8ne-widget-on": When agents (human or bot) are connected, DOM elements marked with the CSS class "oct8ne-widget-on" will be visible. Clicking on them will open a session with an agent.
“oct8ne-widget-off": When agents (human or bot) are offline, all DOM elements marked with the CSS class "oct8ne-widget-off" will be visible. Clicking on them will display the contact form, as there are no agents present at that time.
The following code shows an ON element and can be customized by modifying the inline styles. The important thing is that the element contains the desired class.
The styles can be applied inline or via an attached CSS file.
- <body>
- ...
- <div class="oct8ne-widget-on" style="display: none; position: fixed; top: 0; right: 0; z-index: 9999">
- Talk to an expert
- </div>
- ...
- </body>
*The styles applied in this code are for example purposes.
It is mandatory that these elements be hidden when the page loads, either using inline styles or CSS stylesheets. You must set their style to 'display: none'. Oct8ne will handle displaying these elements when appropriate.
Also, make sure to add these elements before the oct8ne MASTER script loads. In other words, the elements must already be in the DOM when the oct8ne script loads.
All these elements can coexist on the same page so that both classes can display different messages depending on whether the agents are available or not.
Example:
- <body>
- ...
- <div class="oct8ne-widget-on" style="display: none">
- Talk to an expert
- </div>
- <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 (or the same image):
- <body>
- ...
- <div class="oct8ne-widget-on oct8ne-widget-off" style="display: none">
- Talk to us!
- </div>
- ...
- </body>
To prevent this development from conflicting with the default Oct8ne icon, you'll need to disable the default widget from the Oct8ne control panel. Go to Web Chat > Appearance > Livechat.
ADDITIONAL CLASSES TO DISTINGUISH BETWEEN PHYSICAL AGENTS (people) AND BOTS
If we want to customize the message and behavior based on agent availability, distinguishing between people and bots, Oct8ne provides additional CSS classes for this purpose.
The following table summarizes these classes, as well as when Oct8ne will make the elements that use them visible:
The following code block shows an example of using these classes to display different messages depending on the availability of humans 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>
For these additional classes, the same requirements apply as before:
- Ensure these elements are hidden on the page using inline styles and/or stylesheets, setting the property to "display:none".
- Ensure they are present in the DOM before the main Oct8ne script loads.
Related Articles
Oct8ne dynamic widget
How to configure the OCT8NE DYNAMIC widget These instructions are intended for people with a minimum knowledge of web programming language: HTML and CSS. If this is not your case, we recommend that you contact your developers and provide them with ...Customised or personalised triggers
These instructions are intended for people with a basic understanding of web programming languages: HTML and JavaScript. If this does not apply to you, we recommend that you contact your developers and provide them with these instructions. The ...Oct8ne API for custom CSM integration
Oct8ne API documentation API version 2.4 Contents 1. Introduction 2. Architecture 3. Overview 3.1. Downloading and installing plug-ins and extensions 3.2. Registering as a developer and enabling the platform 3.3. Inserting the oct8ne widget 3.4. ...Install Oct8ne via Google Tag Manager (GTM)
Install Oct8ne via Google Tag Manager (GTM) To display the Oct8ne code on your page using Google Tag Manager (GTM), follow these steps: 1.- Open the GTM workspace, select Triggers from the main menu, and click the NEW button. 2.- Click on the Trigger ...Integration with Google Analytics version 4 (GA4)
Introduction Oct8ne allows direct integration with Google Analytics version 4 (GA4) through event submission. These provide vital information about the interactions that take place within Oct8ne, which you can check in your Google Analytics ...