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

In TextYess, open Growth Tool Kit in the menu. On the WhatsApp chat bubble card, click Set up the bubble. Set the colors, the position and the texts.

Get the code snippet

Click Install. TextYess saves your settings and shows the code snippet. Click Copy.
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"></textyess-bubble-widget>

Go to Appearance > Editor

Once inside your store click on “Appearance” from the menu on the left.
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

In TextYess, open Agents → WhatsApp Agent and the Appearance tab, or Growth Tool Kit → WhatsApp chat bubble. Click Install, then click Copy. The snippet already contains 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"
></textyess-bubble-widget>

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

Campaigns

Email

Automations

Contacts

Inbox

AI agents

Analytics

Growth Tool Kit

Account

Shopify

WooCommerce

Magento

Helpdesks and marketing tools

TextYess MCP

Flows API

Orders API

Conversations API

Products API

Campaigns API

Analytics API

WhatsApp Bubble installation

Troubleshooting