[WOOCOMMERCE] WhatsApp Bubble installation

Looking for the Onsite Chat Widget instead? Check out the Onsite Widget installation guide.

Pick the method that works best for you:

Option A: Visual Editor (recommended)
Option B: footer.php (code snippet)

Customize your widget appearance

Click on the “Growth tool kit” section of the menu. From there select the Chat Bubble integration block and personalize your widget.

Get the code snippet

From there you will find the code snippet to insert into your Woocommerce theme.
The code will look something like this:

<script
  type="module"
  src="https://cdn.textyess.com/v2/textyess-widget-components/textyess-widget-components.esm.js"
  defer
></script>
<textyess-bubble-widget user_id="your_organization_id" />

Go to Appearance > Editor

Once inside your store click on “Appearance” from the menu on the right.
From there click on “Editor”

Open the Patterns section

Once opened the editor, you should see something like this. You will need to click the “Patterns”

Open the Header pattern

Several patterns will be shown. You need to scroll down and select the one named “Header”
Once again, more than one header pattern may shown. Click the one in which you want to show the widget.

Before proceeding we strongly recommend that you duplicate the pattern that you want to edit. To do this, click on the three dots, then click on “Duplicate”.

Edit and save the code

Got a the bottom of the file and paste the code from step 2 right before the last 
Once you have edited the code, click save in the upper right corner.

Congratulations, we are live! 🥳

Use this method if you prefer adding code directly, or if the Visual Editor is not available on your theme. Adding the widget to footer.php is safer than functions.php because it simply outputs HTML before the closing </body> tag — no PHP hooks or function wrappers needed.

Get the code snippet from the TextYess dashboard

Go to your WhatsApp Agent page, open the Appearance tab, and click the button to copy the code snippet. It will already contain all your settings — no need to change anything.

Open your theme's footer.php

In your WordPress admin panel, go to:Appearance > Theme File EditorOn the right sidebar, find and click on Theme Footer (footer.php).

Where exactly is this file? From your WordPress admin: sidebar menu > Appearance > Theme File Editor. Then look at the file list on the right side of the screen and click Theme Footer (footer.php).

If you’re using a child theme (recommended!), edit the child theme’s footer.php instead. This way your changes survive theme updates.

Paste the code just before the closing body tag

Find the <?php wp_footer(); ?> line (usually near the bottom of the file) and paste the following code right before it. Replace the placeholder values with your own (you’ll find them in the TextYess dashboard under Growth Tool Kit):

<script type="module" src="https://cdn.textyess.com/v2/textyess-widget-components/textyess-widget-components.esm.js" defer></script>
<textyess-bubble-widget
    user_id="YOUR_ORGANIZATION_ID"
    bubble_color="#25D366"
    bubble_content_color="#FFFFFF"
    initial_message="YOUR_WELCOME_MESSAGE"
    default_message="YOUR_DEFAULT_MESSAGE"
    box_bg_color="#FFFFFF"
    box_color="#43474e"
    position="right"
    cta="YOUR_CTA_TEXT"
    cta_color="#25D366"
    cta_content_color="#FFFFFF"
/>

Don’t worry about replacing placeholders manually — the code you copy from the dashboard already has your values filled in. The snippet above is just an example of what it looks like.

Click 'Update File'

Hit the Update File button at the bottom of the editor.

That’s it! The chat bubble should now appear on your store. Refresh any page to see it. 🥳

Troubleshooting

I don't see the bubble on my store

Make sure you clicked Update File after pasting the code.
Clear your browser cache and any WordPress caching plugin (WP Super Cache, W3 Total Cache, etc.).
Check that YOUR_ORGANIZATION_ID is replaced with your actual ID from the TextYess dashboard.

The widget appears but looks broken

I can't find footer.php

Go to Appearance > Theme File Editor (not “Customize”).
If you don’t see this option, your hosting provider may have disabled file editing. In that case, use FTP or your hosting panel’s File Manager to navigate to wp-content/themes/YOUR-THEME-NAME/footer.php.

Get Started

WooCommerce

Guides

Webhooks

Products API

Campaigns API

Analytics API

[WOOCOMMERCE] WhatsApp Bubble installation

Troubleshooting

Get Started

WooCommerce

Guides

Webhooks

Products API

Campaigns API

Analytics API

​Troubleshooting

Troubleshooting