This article will provide you with tips on the design, integration, and proper use of custom buttons - you can find more technical information in the developer documentation.

Custom buttons in a nutshell

Concept

Unlike the "classic" iAdvize notifications, which you can customize from the iAdvize administration through our notification builder, custom buttons allow you to integrate an engagement method directly into your web page, giving it the look and feel you want: iAdvize gives you code templates, and your company takes care of the design and integration of the button. We share with you some tips on how to use them.

Why should you use custom buttons? 

• their customization allows you to fully integrate them into the design of your web page, by placing them in strategic locations
• they are often considered less intrusive than "classic" notifications that "float" over the visitors' page 
• you can also combine several engagement methods by combining "classic" notifications floating on the page and custom buttons embedded in a page. This allows you to engage both visitors "discovering" the page (floating notification) and those looking for specific information (custom button).

Composition

1 Header

2 Content

3 Avatars

4 Call to Action (CTA) button

Design and placement of your custom button

Placement 

On an e-commerce site

• on a product page, we recommend placing your button near the product description for visitors who want more information, or near the "add to cart" button
• on a category page or a product list, we recommend placing your button high up on the page, as visitors give most of their attention to the content of the first two screens
• on the home page, we recommend placing the button near the star products
• in the purchase funnel
• on a contact page, we recommend highlighting the button to encourage messaging, which will allow visitors to get an instant response or be contacted later. 

On a non-commercial site

• near pages, descriptions or services that are subject to questions from your visitors or users
• near pages, descriptions or services that represent commercial opportunities
• on a contact page, we recommend that you highlight the button to encourage messaging, which will allow visitors to get an instant response or to be contacted later.

Design

Avatar

We recommend that you include one or more human avatars on the button to make visitors understand that they will be talking to a real person. More tips on avatars in our article on notification design.

Pictogram

You can use a pictogram (for example: a conversation bubble) to clarify to visitors the experience that awaits them if they click on the button. In this case, we recommend you use a graphic style in harmony with your website.

Dimensions

The advantage of a custom button is that you can adapt the dimensions of the button to those of your page. 

- on a mobile site, don't hesitate to use the full width of the screen according to the current standards of mobile navigation. 

- on desktop, we recommend a minimum of 200 pixels wide by 150 pixels high, depending on your website grid.

Text

You can read our general recommendations on text in this article dedicated to notification design. The only thing special about custom buttons is that they are integrated into your site, so we recommend that you carefully match their text to your site's vocabulary. 

Managing multiple channels

• you can offer multiple channels in multiple corresponding buttons, allowing your visitors to choose their favorite messaging channel - just make sure you make this explicit on each button. 
• on highly engaging channels such as call and video, make sure that visitors are well aware of the proposed experience before initiating the conversation

Manage availability and conversation evolutions

Depending on the availability of respondents

• as the custom button is a part of your site, we strongly advise you not to make it disappear when respondents are unavailable (which is possible with "classic" notifications)
• if your respondents are available or if there are still slots in the queue, we recommend that you display a green dot to indicate availability
• if your respondents are unavailable or busy and there are no slots left in their queue, we recommend displaying a gray or red dot, and turning the CTA gray to discourage your visitors from engaging in the conversation. 

As the conversation evolves

 .

After engaging in the conversation, you should notify your visitors if they have received a new response:

• either, if you have authorized the use of the reduced chatbox, by the appearance of a red dot on it with the number of new messages (default option)
• or by displaying a floating banner, to be displayed on the right or on the left of their screen (option to be activated manually in the notification builder) 
• you can also display a red dot on the CTA including the number of new messages received

Integrate your custom button from the iAdvize administration

You can set up the custom button from the "Engagement" section, under "Notifications & chatbox".

In the notifications, click on the green + to create a new notification.
In the template menu, choose "fixed button".

In the CSS selectors menu, enter the lines of code configured by your engineering team to correspond to the three possible states of your fixed button: available, busy or disconnected agents (more details in our documentation for developers).

Don't hesitate to read our general recommendation about notification design before you start the work on your custom buttons! You can also find the details of these settings and many more fine-tuning recommendations in the documentation for developers.