<aside> 💡 TL;DR

1. Create your widget copy on WhatsApp Widget Generator
2. Copy the HTML code, CSS link & JS link
3. Paste in footer.php of your main theme
4. Publish! </aside>

1. Creating the WhatsApp widget

You can create your own widget using the WhatsApp Widget Generator tool on Hoola’s website. This is the first step.

In there, you put your information:

1. Welcome message text
2. Teaser message text
3. CTA button text
4. Button Color

And in the next step:

1. Your WhatsApp business number
2. Your pre-filled message

Hit “Generate”

Your information is saved in an HTML code, this is what we need.

Test the link to see if it actually goes to your WhatsApp, and puts the right pre-filled message.

Hit “Copy” to copy the html code.

2. Add the code in WooCommerce

<aside> 🚨 There’s 3 options to install the widget in WordPress/WooCommerce

1. Using the functions.php file in the Theme File Editor.
2. Adding the code using Google Tag Manager
3. Installing a plugin / using a page builder </aside>

How do you know which to choose?

Have a child theme? —> use functions.php in your child theme

⤷ Have Elementor / Page builder? —> add code to header & footer

⤷ Have Google Tag Manager? —> Use this guide.

⤷ Have none of above? —> install Headers & Footers Plugin

2.1 Install using a child theme in functions.php

In your WordPress admin dashboard, go to “Theme File Editor”

Then, on the right side:

1. Make sure your child theme is selected (often by default)
2. Click to open functions.php

Scroll to the buttom and paste the following:

These are the javascript and css files to style the widget.

function enqueue_hoola_script() {
    wp_enqueue_script( 'hoola-widget', '<https://cdn.hoola.so/public/scripts/hoola-widget.js>', array(), null, true );
    wp_enqueue_style( 'hoola-widget-style', '<https://cdn.hoola.so/public/css/hoola-widget.css>' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_hoola_script' );

Below, paste the HTML generated widget code from Step 1.