Oct8ne dynamic widget

Oct8ne dynamic widget

Warning
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 IS A DYNAMIC WIDGET?

Oct8ne's dynamic widget is a widget that centralizes all your company's communication channels, acting as a hub. It's simply a button that allows users to quickly see the available ways to contact your company, from traditional methods like phone and email to digital channels such as social media and live chat.

Let's see how to configure it in 2 easy steps. Let's begin:

1.- Link CSS to your page.

First, you need to use the CSS that Oct8ne provides by default. You must insert it into the page (usually the master page of your entire website) where you want to configure the Oct8ne dynamic widget.

For them, you will need to add this line to your website within the <head> tag.
For Europe:
The server to which calls should be directed depends on the Oct8ne data center to which your company subscribes.

Info
Once you're logged into the Oct8ne control panel, check your browser's address (URL):
If it's something like 'backoffice.oct8ne.com', your data center is in the USA.
If it's 'backoffice-eu.oct8ne.com', your data center is in the EU.

In the EU, you must use → static-eu.oct8ne.com
In the USA, you must use → static.oct8ne.com
** If you have any questions about which data center is right for you, please consult the Oct8ne support team.

Once that's done, we move on to step 2.

2.- Add the HTML 'template'

At this point you will need to add a code to the page (usually the master page of your entire website) where you want to configure the Oct8ne dynamic widget.

Here's the code:
  1. <div id="oct8ne-widget-dynamic" class="oct8ne-dynamic"> 
  2.       <div class="oct8ne-channels oct8ne-animation-up"> 
  3.          <div class="channel-item oct8nechat" title="Oct8ne CHAT"> 
  4.         <a class="oct8nechat oct8ne-widget-on oct8ne-widget-off oct8ne-widget-no
  5. hide"></a> 
  6.       </div> 
  7.        <div class="channel-item" title="Open WhatsApp"> 
  8.         <a class="whatsapp" 
  9. href="https://wa.me/{PhoneNumber}?text={OptionalText}" target="_blank"> </a> 
  10.       </div> 
  11.        <div class="channel-item" title="Open Messenger"> 
  12.         <a class="messenger" href="https://m.me/{MessengerNameAccount}" 
  13. target="_blank"></a> 
  14.       </div> 
  15.        <div class="channel-item" title="Open Instagram"> 
  16.         <a class="instagram" 
  17. href="https://www.instagram.com/{InstagramUsername}/" target="_blank"> </a> 
  18.       </div> 
  19.          <div class="channel-item" title="Phone call"> 
  20.         <a class="oct8nephone" href="tel:+{Phone}"> </a> 
  21.       </div> 
  22.        <div class="channel-item" title="Send an email"> 
  23.         <a class="oct8nemail" href="mailto:{Email}"> </a> 
  24.       </div> 
  25.      </div> 
  26.      <div class="oct8ne-main-btn bubble-icon" title="All channels"></div> 
  27.   </div> 

This code consists of a general container layer (div #oct8ne-widget-dynamic) inside which we find another layer with the complete list of channels (div .oct8ne-channels).
Within the channel list, we find each channel individually. Each layer with the class '.channel-item' corresponds to a dot 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 as you wish. You can delete items from the layer (.oct8ne-channels) that you are not interested in or do not want. Keep only the ones that best suit your needs.

You must delete the entire section corresponding to the item (div .channel-item) that you do not want.

2.2- MODIFY LINKS

Some channels need to be configured with the relevant URLs for each social network, or with some additional information. You will need to modify the 'href' property of the corresponding links (<a>).

WhatsApp Channel:
If you wish to use this channel, you will need to construct the URL of the WhatsApp number you are going to use.
You must replace the variable {PhoneNumber} with your number.

Info
{PhoneNumber} → WhatsApp number
Example of final URL: https://wa.me/34666778899

Messenger Channel
If you wish to use this channel, you will need to create the URL for your Messenger profile.
You must replace the variable {MessengerNameAccount} with your account name.

Info
{MessengerNameAccount} → Messenger account name
Example of final URL: https://m.me/my_fb_user

Instagram Channel:
If you wish to use this channel, you will need to create the URL for the Instagram profile you will be using.
You must replace the variable {InstagramUsername} with your Instagram username.
Info
{InstagramUsername} → Instagram username

Phone call:
If you wish to use this channel, you will need to construct the URL with the desired phone number.
You must replace the variable {Phone} with the phone number.

Info
{Phone} → phone number
Example of final URL: tel:+34666778899

Send Email:
If you wish to use this channel, you will need to construct the URL using the desired email address.
You must replace the variable {Email} with a valid email address in the correct format.

Info
{Email} → email
Example of final URL: mailto:email@server.com 

Congratulations! With these 2 steps you have now installed the Oct8ne dynamic widget

ADVANCED OPTIONS

MODIFY MAIN BUTTON ICON

The Oct8ne dynamic widget can be configured with different icons for the main button.
Oct8ne provides two different icons for you to choose from. You can do this using CSS classes, by adding a CSS class to the main button's layer (div .oct8ne-main-btn).
 
You can choose one of the two available images:

MENU OF POINTS IN CIRCLES
Class to use is:   circled-icon

CHAT BUBBLES
Class to use is:  bubble-icon

Info
Example: In this case we are going to use ‘bubble-icon’.
  1. <div class="oct8ne-main-btn bubble-icon"> 

MODIFY POSITIONS

The Oct8ne dynamic widget can be configured in different positions on your website.
Oct8ne offers four positions so you can choose the one that best suits your site. You can do this using CSS classes, by adding a CSS class to the main widget's container layer (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
Class to use is:   oct8ne-dynamic-br
**By default, if no class is specified using the 2 letters, it is bottom-right

TOP RIGHT
The widget appears in the top right corner of your page.
Class to use is:   oct8ne-dynamic-tr

BOTTOM LEFT
The widget appears in the bottom left corner of your page.
Class to use is:   oct8ne-dynamic-bl

TOP LEFT
The widget appears in the top left corner of your page
Class to use is:   oct8ne-dynamic-tl

Info
Example: In this case we are going to use ‘top-left’.
  1. <div id="oct8ne-widget-dynamic" class="oct8ne-dynamic-tl"> 

MODIFY ANIMATION

Similarly, depending on the widget's position, the animation effect can also be configured by modifying the class of the channel container layer (.oct8ne-channels).

You can choose one of the four available animations, depending on your chosen position.

UP: Upward animation effect
Class to use is: oct8ne-animation-up

DOWN:  Downward animation effect
Class to use is: oct8ne-animation-down

RIGHT: Right animation effect
Class to use is: oct8ne-animation-right

LEFT: Left animation effect
Class to use is: oct8ne-animation-left

Info
Example: In this case we used a downward animation.
  1. <div class="oct8ne-channels oct8ne-animation-down"> 

MOBILE ADAPTATION

There is an optional class that can be used in certain scenarios. You should apply it on mobile devices; it's designed to reduce the widget's size so it fits most devices.
To apply it, you must add the class 'oct8ne-dynamic-mobile' to the main container layer (#oct8ne-widget-dynamic).

Info
Applaying the adaptation to mobile devices:
  1. <div id="oct8ne-widget-dynamic" class="oct8ne-dynamic-tl oct8ne-dynamic-mobile"> 

OVERWRITE CSS (optional)

Oct8ne initially provides a generic widget, but we understand that the look and feel of your page is important to you. Therefore, you can always override the dynamic widget's CSS properties 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're modifying.

Example code to include in your CSS:
  1. .channel-item a.whatsapp {
  2.        background-color: #000000 !important;
  3. }
  4. .channel-item a.messenger {
  5.        background-color: #000000! important;
  6.        background-image: url(https://tuserver.com/tusimagenes/tuicono.png) !important;
  7. } 
Idea
If you're using message 'callouts', you might also want to modify their CSS.
The layers you need to modify are the layer with ID 'oct8ne-alerts-callouts-wrapper' and its inner layers.

    • Related Articles

    • 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 ...

    • Oct8ne API for custom CSM integration

      These instructions are intended for people with a basic understanding of web development languages. If this doesn't apply to you, we recommend contacting your developers and providing them with these instructions. Integration and development will be ...

    • 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 ...

    • 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 ...

    • 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 ...