Instant and personalized communication with your customers can make the difference between a successful sale and a lost opportunity. Hoola's Widget and Live Chat are revolutionary tools designed to transform your customer service and boost your conversions. Let's explore in detail how these features can elevate your visitors' experience and enhance your business.

All-in-One Widget

Hoola offers an All-in-One Widget that combines WhatsApp, Live Chat, and soon, Hoola Stories. This comprehensive solution allows you to:

Centralize your communication on a single platform.

Offer your customers multiple contact channels.
Improve user experience with an attractive and functional design.
Facilitate installation, especially for WooCommerce users.

Additionally, you get:

Instant communication: Allow your customers to contact you with a single click.
Customization: Adapt the appearance and messages to your brand.
Versatility: Combine WhatsApp and Live Chat in a single widget.
Improved user experience: Offer support without customers leaving your site.
Increased conversions: Facilitate query resolution, which can lead to more sales.

WhatsApp Widget ConfigurationOur WhatsApp widget allows your customers to easily contact you through your website. It's very easy to create and you can add it to your website in just 2 clicks.

1 Create your widget and customize it in your Hoola account

In your Hoola account go to settings and then go to widgets and create a widget.

Configure the Widget.

This is the message the customer will see when they enter your website. We recommend adding something like "I have a gift for you" if we're using the welcome flow. If desired, we can also choose not to add any message.

Set up the welcome message.
This is the message that will appear when the client clicks in the bubble. The idea here is for us to give them some details of the channel. If we are using the welcome flow, then the text should be something like "Join the channel and you will receive (...)".
Set up the call to action text.
That is the text that will appear in the button.
Set up the prefilled message.
This is the message that will appear once the client clicks the button and is redirected to Whatsapp. The idea is for us to add a message that triggers a flow, like the welcome flow.

Customize your launcher
Here we can style our launcher. We have to options Icon (Widget only) and Icon + Label (widget and short call to action text). Also, we are able to position the widget on the right or left and move it in any direction.

It is also possible to position the widget according to your preference.

Position it automatically to the right or left using "Widget position on page" or customize the position using "Move left / right".

Employ positive values (+ "number" px) to move upwards or to the right
Utilize negative values (- "number" px) to move downwards or to the left

Build your widget preferences

In the preferences tab we can edit the preferences for your widget. Here you can choose in which pages you want it to appear, you are able to delay it's appearance and install it.

Display rules - Show or hide in specific pages
By default the widget will be shown in every page. If you want for it to show in specific pages or hide it in specific ones, choose those options in the "Where should your widget be available" drop down.

In any case, after you selected the option you must add the URL template where you want it to be shown/hidden.

Here is a guide for you to understand eCommerce Templates:

Template name	Used for…
article	individual posts in a blog
blog	blog page, which lists all articles within a blog
cart	the `/cart` page, which shows a customer’s cart
collection	collection pages, which lists all products within a collection
index	your home page, at the root URL (`/`)
page	regular shop pages, such as About us and Contact us.
product	individual product pages

Display rules - Delay appearance
To delay the appearance of the widget you just have to add the number (in seconds) of the delay in the "Delay Appearance" section:

Here is an example of a widget with both rules:

Note that in this example, the widget will be hidden in all the products and in the cart of the website.

Install your widget

Click Installation for WooCommerce

In the left Dashboard Bar in WooCommerce (WordPress) click in "Plugins" and then "Add New Plugin"

Then Click on "Upload Plugin" and go to "Choose File"

You should choose the .zip file "hoola-widget.zip" that has been shared with you and proceed to click on "Install Now".

And now you are all set up! You can review and double check the Plugin status:

Click Installation for Shopify

Press the "install" button

Now you must go to your Shopify admin and enable the Hoola app in your theme. For this go to your Online Store Themes in Shopify and select "Customize"

Now select the "Apps embeded" tab and turn on the Hoola Widget.

And that's it! now your widget is installed!

Manual installation

Copy your widget code

Add the code to Shopify:
Open theme editor
Online store > Themes > ... > Edit code
Create a bubble.liquid snippet
Scroll in the left bar down to snippet > Add a new snippet.
Call it bubble(.liquid).
Then, paste your generated widget code in there.
Hit “Save”!

Add the functional code in theme
Scroll in the left bar to theme.liquid
Place the following 2 lines of code within the <head> section
Copy the script & stylesheet:

Hit “Save”!
You have all the assets that you need, but nothing will show up yet!
We need to decide where to show it.
This is how you add the widget to everywhere on your website:

Render the code in Shopify
Keep the theme.liquid file open and find the <body> opening tag.
To have the widget show up, paste the following in the body:
```
{% render 'bubble' %}
```
Hit “Save”!

Live Chat Implementation

Hoola's Live Chat allows you to offer real-time support without customers leaving your site. Here's how to integrate it:

1. Activate Live Chat

In your Hoola Widgets panel, enable the Live Chat function along with the WhatsApp widget.

2. Customize the appearance

Adjust colors, fonts, and styles to match your brand, creating a coherent experience.

3. Configure an initial greeting

Create a welcome message that engages your visitors, for example: "Hello! How can we help you today?".

4. Customize your launcher

Choose between different styles and positions for the chat button, ensuring it's visible but not intrusive.

5. Configure your preferred channels

Select whether you prefer to offer support via web (Live Chat) or WhatsApp.
Configure transfer channels (email or WhatsApp) for smooth communication.

Display rules - Show or hide on specific pages.By default, the widget will be shown on all pages. If you want it to show on specific pages or hide it on some, choose those options in the dropdown menu "Where should your widget be available".

In any case, after selecting the option, you must add the URL template where you want it to show/hide.

6. Final installation

Finally (after performing the installation from your eCommerce platform), install your Widget or LiveChat by clicking on "Install". Keep in mind that for future changes made to the Widget or LiveChat, it's necessary to click on "Install" again and we recommend clearing the site's cookies and cache to be able to view the changes on your website.

Test Widget or LiveChat

Advanced Strategies to Maximize Impact

Integration with automated flows: Connect your widgets with Hoola flows to guide customers through specific processes, such as onboarding or common problem resolution.
Visitor segmentation: Use different messages and offers depending on the page the user is visiting, personalizing the experience.
Analysis and optimization: Regularly review engagement metrics and adjust your strategy accordingly, continuously improving the effectiveness of your widgets.
Team training: Ensure your support team is well-trained to handle queries across multiple channels, maintaining consistent tone and quality.
Dynamic personalization: Use user information to offer a more personalized experience in each interaction, increasing relevance and customer satisfaction.

Power Up Your Customer Service: Hoola's WhatsApp Widget and Live Chat