Help Center

Explore our knowledge base
article

Implement a static button (also called fixed button)

The fixed button/widget is a button that is placed in the actual content of your page. It is integrated in the body and therefore does not follow the navigation of the visitor as the floating button does.

How it works:
Depending on the availability of your agents, iAdvize will simply show / hide an HTML element implemented on your pages. 

To configure a static button, 3 steps need to be performed:

  1. Creating the button in the iAdvize administration, by indicating the path to the HTML elements to be shown / hidden
  2. Associating the fixed button to a targeting rule
  3. If the HTML element for the button is not already existing on your pages, implement the proper HTML code on your website

You will find below the details for these 3 steps. 

To implement a static button with iAdvize, it used to be necessary to use a javascript code "iAdvizeCallbacks". This javascript code is not supported anymore and can be removed.

 

1/ Create a static button from the iAdvize administration
2/ Associate your static button to a targeting rule
3/ Implement on your pages the HTML code of the static button
3.1/ Static chat button HTML code
   Static chat button managing 1 state (available)
   Static chat button managing 2 states (available & unavailable)
   Static chat button managing 3 states (available / unavailable / busy)
3.2/ Static call button HTML code
   Static call button managing 1 state (available)
   Static call button managing 2 states (available & unavailable)
3.3/ Static chat & call button HTML code
   Static chat & call button managing 1 state (available)
   Static call button managing 2 states (available & unavailable)

 

 

1/ Create a fixed button from the iAdvize administration

To create a fixed button from the iAdvize Administration, go to Engagement, then Notifications, click on the button  bouton-add.png 

notif-builder-btnfixe-EN.png

Then you will access the button creation form:

notif-builder-btnfixe02-EN.png

  1. By clicking on "Save" (at the top right), you will be able to give a name to the fixed button - in order to find it when you associate it with a targeting campaign
  2. Choose the channel (chat, call or video) you want to associate with this button
  3. Click on the <> to indicate the CSS selector that will allow iAdvize to find the HTML element corresponding to your button on your pages (more details below). 

notif-builder-btnfixe03-EN.png

The CSS selector will give the path to the corresponding HTML element, to allow iAdvize to show / hide it on your pages.

Important: This information has to match 100% the HTML code on your pages for the static button. This filed is case-sensitive (#idzfonline and #idzFonline will be considered as different elements).

Recommendation :

By default, we recommend to use ID CSS (# is the selector for the ID, e.g.#idzfonline) or to use for CSS CLASS (. is the selector for the CSS class, e.g..idzfonline) :

  • Online Status: #idzfonline (OR .idzfonline)
  • Offline Status: #idzfoffline (OR .idzfoffline)
  • Busy Status: #idzfbusy (OR .idzfbusy)

You can now save your new fixed button.

 

2/ Associate your fixed button to a targeting rule 

Once the static button is created, it must be associated with a targeting rule to appear on your site. 
To do that, go to Engagement, then targeting campaigns.

Create or edit a targeting rule, and select the action "Display a fixed button". Then you can choose your button in the list and save the rule.

notif-builder-btnfixe04-EN.png


For more information about targeting rules, please check the article related to the engagement campaigns.

Note : Please do not forget that a newly created rule requires to be distributed to your agents.

 

3/ Implement on your pages the HTML code of the static button

Below you will find several examples of HTML codes for static button implementations (chat and call). You can use any of them depending on your needs. Help yourself!

Important: The CSS selector configured in your fixed button (step 1 of this article) needs to correspond to the HTML code you will use on your pages.

The examples below are based on HTML IDs. If you want to use these HTML codes, then you can use this information for the CSS selectors when creating your buttons:
Static chat button :
- Online state: #idzfonline
- Offline state: #idzfoffline
- Busy state: #idzfbusy

Static call button :
- Online state: #idzfcallonline
- Offline state: #idzfcalloffline


3.1/ Static chat button HTML code 


Static chat button managing 1 state (available)

To install a static Chat button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<!-- START IADVIZE HTML CHAT CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CHAT CALLBACK -->

Please fill in the value:

  • ONLINE CHAT BUTTON : HTML code (image or text) indicating that agent are available

For example:
ex-bouton-fixe-chat-dispo.png

 

Static chat button managing 2 states (available & unavailable)

To install a static Chat button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<!-- START IADVIZE HTML CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALLBACK -->

Please fill in the value:

  • ONLINE CHAT BUTTON: HTML code (image or text) indicating that agent are available
  • OFFLINE CHAT BUTTON: HTML code (image or text) indicating that agent are unavailable for chat

For example:
ex-bouton-fixe-chat-dispo-indispo.png


In this example, when the agents are unavailable for chat, visitors are redirected to the Facebook/Messenger (https://www.facebook.com/messages/t/user:xxxxxxx).

To configure this, it is necessary to replace the "xxxxxxxx" by the Facebook page id. 


Static chat button managing 3 states (available / unavailable / busy)

To install a static Chat button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<!-- START IADVIZE HTML CALLBACK -->
<div class="idz_btn_fix">
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfbusy" style="display: none;"><a href="javascript:void(0)">BUSY CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALLBACK -->

Please fill in the value:

  • ONLINE CHAT BUTTON: HTML code (image or text) indicating that agent are available for chat
  • BUSY CHAT BUTTON : HTML code (image or text) indicating that agent are busy for chat
  • OFFLINE CHAT BUTTON :HTML code (image or text) indicating that agent are unavailable for chat

 

3.2/ Static call button HTML code

Static call button managing 1 state (available)

To install a static Call button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<!-- START IADVIZE HTML CALL BUTTON -->
<div class="idz_btn_fix_call">
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALL BUTTON -->

Please fill in the value:

  • ONLINE CALL BUTTON : HTML code (image or text) indicating that agent are available for call


Static call button managing 2 states (available & unavailable)

To install a static Call button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<!-- START IADVIZE HTML CALL BUTTON -->
<div class="idz_btn_fix_call">
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<div id="idzfcalloffline" style="display: none;"><a href="javascript:void(0);">OFFLINE CALL BUTTON</a></div>
</div>
<!-- END IADVIZE HTML CALL BUTTON -->

Please fill in the value:

  • ONLINE CALL BUTTON : HTML code (image or text) indicating that agent are available for call
  • OFFLINE CALL BUTTON : HTML code (image or text) indicating that agent are unavailable for call

 

3.3/ Static chat & call button HTML code

Static chat & call button managing 1 state (available)

To install a static Chat & Call button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<div class="idz_btn_fix_all">
<!-- START IADVIZE HTML CHAT CALLBACK -->
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<!-- END IADVIZE HTML CHAT CALLBACK -->
<!-- START IADVIZE HTML CALL BUTTON -->
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<!-- END IADVIZE HTML CALL BUTTON -->
</div>

Please fill in the value:

  • ONLINE CHAT BUTTON : HTML code (image or text) indicating that agent are available for chat
  • ONLINE CALL BUTTON : HTML code (image or text) indicating that agent are available for call

 

Static call button managing 2 states (available & unavailable) 

To install a static Chat & Call button (only displayed when an agent is available), copy the HTML code where the fixed button should appear:

<div class="idz_btn_fix_all">
<!-- START IADVIZE HTML CHAT CALLBACK -->
<div id="idzfonline" style="display: none;"><a href="javascript:void(0)">ONLINE CHAT BUTTON</a></div>
<div id="idzfoffline" style="display: none;"><a href="javascript:void(0)">OFFLINE CHAT BUTTON</a></div>
<!-- END IADVIZE HTML CHAT CALLBACK -->
<!-- START IADVIZE HTML CALL BUTTON -->
<div id="idzfcallonline" style="display: none;"><a href="javascript:void(0);">ONLINE CALL BUTTON</a></div>
<div id="idzfcalloffline" style="display: none;"><a href="javascript:void(0);">OFFLINE CALL BUTTON</a></div>
<!-- END IADVIZE HTML CALL BUTTON -->
</div>

Please fill in the value:

  • ONLINE CHAT BUTTON : HTML code (image or text) indicating that agent are available for chat
  • OFFLINE CHAT BUTTON : HTML code (image or text) indicating that agent are unavailable for chat
  • ONLINE CALL BUTTON : HTML code (image or text) indicating that agent are available for call
  • OFFLINE CALL BUTTON :HTML code (image or text) indicating that agent are unavailable for call

 

Comments