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 into 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. By implementing your own HTML code, you can design your engagements according to your needs and offer an omnichannel button by integrating the channels offered to your visitors within the same fixed button (point 3.3).

This element can be an image, a link or text that is part of your web page. So it allows you to customize its display as you want.
The example below shows an image the visitor can click to open a call, chat or video window:

fixe_omnichannel.png

 

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. 

Attention: 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 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. 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% of the HTML code on your pages for the static button. This field is case-sensitive (#idzfonline and #idzFonline will be considered as different elements).

Recommendation :

By default, we recommend using ID CSS (# is the selector for the ID, e.g.#idzfonline) or 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 Campaigns.

Create or edit a targeting rule, and select "Notification" > Fixed Chat. Then you can choose your button and the associated channel. Then save the rule.

bouton-fixe2020-EN.png


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

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

Static video button :
- Online state: #idzfvideoonline
- Offline state: #idzfvideooffline

The parent block containing your HTML button should be set as visible within the code to trigger the engagement rule


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 agents are available
  • OFFLINE CHAT BUTTON: HTML code (image or text) indicating that agents 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 Facebook/Messenger (https://www.facebook.com/messages/t/user:xxxxxxx).

To configure this, it is necessary to replace the "xxxxxxxx" with 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 agents are available for chat
  • BUSY CHAT BUTTON: HTML code (image or text) indicating that agents are busy for a chat
  • OFFLINE CHAT BUTTON: HTML code (image or text) indicating that agents 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 agents 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 agents are available for call
  • OFFLINE CALL BUTTON: HTML code (image or text) indicating that agents 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 agents are available for chat
  • ONLINE CALL BUTTON: HTML code (image or text) indicating that agents 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 agents are available for chat
  • OFFLINE CHAT BUTTON: HTML code (image or text) indicating that agents are unavailable for chat
  • ONLINE CALL BUTTON: HTML code (image or text) indicating that agents are available for call
  • OFFLINE CALL BUTTON: HTML code (image or text) indicating that agents are unavailable for call

 

3.4 Static video button HTML code

Static video button managing 1 state (available)

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

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

Please fill in the value:

  • ONLINE VIDEO BUTTON: HTML code (image or text) indicating that agents are available for video


Static video button managing 2 states (available & unavailable)

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

<!-- START IADVIZE HTML VIDEO BUTTON -->
<div class="idz_btn_fix_video">
<div id="idzfvideoonline" style="display: none;"><a href="javascript:void(0);">ONLINE VIDEO BUTTON</a></div>
<div id="idzfvideooffline" style="display: none;"><a href="javascript:void(0);">OFFLINE VIDEO BUTTON</a></div>
</div>
<!-- END IADVIZE HTML VIDEO BUTTON -->

Please fill in the value:

  • ONLINE VIDEO BUTTON: HTML code (image or text) indicating that agents are available for video
  • OFFLINE VIDEO BUTTON: HTML code (image or text) indicating that agents are unavailable for video