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 these instructions. The installation will be very easy for them.
WHAT IS THE DYNAMIC WIDGET?
Oct8ne ‘s dynamic widget is a widget that centralizes all the communication channels of your company as a 'binder'. It is just a button that allows the user to quickly visualize the available ways to communicate with your company, from the most classic means, such as phone or mail, to digital channels such as social networks and 'live' chat.
Let's see how to set it up in 2 simple steps. Let's start:
1.- Link CSS to your page.
First of all you must invoke the CSS that, by default, Oct8ne makes available to you. You must insert it in the page (usually in the master page of your entire website) where you want to configure the dynamic widget of Oct8ne.
You must add this line in your website inside the <head> tag
The server to which calls should be routed depends on the Oct8ne data center to which your company is attached.
** If you are in doubt about which data center is right for you, please consult the Oct8ne support team.
Once this is done, we move on to step 2.
2.- Add the HTML template
At this point you must add a code in the page (usually the master page of your entire website) where you want to configure the Oct8ne dynamic widget. This is the code:
This code consists of a general containing layer (div #oct8ne-widget-dynamic) where inside, we find another layer with the whole list of channels (div .oct8ne-channels).
Inside the list of channels, we find each channel separately. Each layer with the class ‘.channel-item’, corresponds to a ball in the widget.
Finally we find the main button layer (.oct8ne-main-btn), which is the button that initiates the action.
2.1 - MODIFY CHANNEL STRUCTURE.
You can configure the widget you want. You can delete the items from the layer (.oct8ne-channels) that do not interest you or that you do not want. Keep only the ones that suit you best.
You must delete the entire section corresponding to the item (div .channel-item) that you do not want.
2.2- CHANGE LINKS
Some channels need to be configured with the relevant ‘urls’ of each social network, or with some additional data. You will need to modify the 'href' property of the corresponding links (<a>).
WhatsApp channel:
If you want to use this channel you will need to construct the URL of the WhatsApp number you are going to use.
You must substitute the variable {PhoneNumber}} for your number.
Messenger channel
If you want to use this channel you will need to construct the URL of your Messenger profile that you are going to use..
You must replace the variable {MessengerNameAccount} with the name of your account.
Instagram channel:
If you want to use this channel you will need to construct the URL of the Instagram profile you are going to use.
You must substitute the variable {InstagramUsername} with the username of your Instagram account.
Phone call:
If you want to use this channel you will need to construct the URL with the desired phone number.
You must substitute the {Phone} variable for the phone number.
Send Mail:
If you wish to use this channel you will need to construct the URL with the desired email.
You must replace the {Email} variable with a valid and correctly formatted email.
Congratulations! With these 2 steps you already have the Oct8ne dynamic widget installed.
ADVANCED OPTIONS
MODIFICAR ICONO DEL BOTON PRINCIPAL
Oct8ne ‘s dynamic widget can be configured with different main button icons.
Oct8ne provides you with 2 different icons to choose from. You can do this through CSS classes, adding a CSS class to the main button layer (div .oct8ne-main-btn)
You can choose one of the two available images:
CIRCLED DOTS MENU ICON
The class to be used is: circled-icon
CHAT BUBBLES ICON
The class to be used is: bubble-icon
MODIFY POSITIONS
Oct8ne ‘s dynamic widget can be configured in different positions on your website.
Oct8ne offers you 4 positions so you can choose the one that best suits your website. This can be done through CSS classes, adding a CSS class to the general container layer of the main widget (div #oct8ne-widget-dynamic).
You must choose one of the four available positions:
BOTTOM RIGHT
The widget appears in the bottom right corner of your page.
The class to use is: oct8ne-dynamic-br
**By default, if no class is specified by the 2 letters, it is bottom-right.
TOP RIGHT
Display the widget in the top right corner of your page.
The class to use is: oct8ne-dynamic-tr
BOTTOM LEFT
Display the widget in the bottom left corner of your page.
The class to use is: oct8ne-dynamic-bl
TOP LEFT
Display the widget in the top left corner of your page
The class to use is: oct8ne-dynamic-tl
MODIFY ANIMATION
Similarly, depending on the position of the widget, the effect of the animation can also be configured by modifying the class of the channels container layer (.oct8ne-channels).
You can choose one of the four available animations, depending on the position you have chosen.
UP: Upward animation effect
The class to use is: oct8ne-animation-up
DOWN: Downward animation effect
The class to use is: oct8ne-animation-down
RIGHT: Animation effect rightwards
The class to use is: oct8ne-animation-right
LEFT: Animation effect to left
The class to use is: oct8ne-animation-left
ADAPTATION IN MOBIL (ADAPTATIVE)
There is an optional class that can be used in certain scenarios. You must apply it on mobile devices and it is intended to reduce the size of the widget, so that it adapts to most devices.
To apply it you must add the class ‘oct8ne-dynamic-mobile’ to the general container layer (#oct8ne-widget-dynamic).
OVERWRITE CSS (optional)
In principle Oct8ne gives a generic widget, but we understand that the 'look and feel' of your page is important to you, and so you can always override the CSS properties of the dynamic widget to suit your needs.
Feel free to modify the colors and even the icons/images that Oct8ne provides by default. You can include rules in your own CSS, and don't forget to add ‘!important’ to the rule you are going to modify.
Example of code to include in your CSS file:
Related Articles
Oct8ne custom widget design
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 ...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. ...Customised or personalised triggers
Oct8ne triggers offer the possibility of interacting with the visitor when specific circumstances previously defined in the ‘Triggers’ section of the Oct8ne dashboard (for example: time on the page or a specific URL address) occur. But sometimes ...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 ...Contextual Information
1. INTRODUCTION One of the main features of Oct8ne is its integrated viewer. The viewer is an interactive space shared by agents and customers, within the chat, to view images and videos of the products in your catalog. Simultaneously, you can zoom ...