Looking for the WhatsApp Bubble instead? Check out the WhatsApp Bubble installation guide.
- Full chat experience with a centered modal dialog
- Product carousel with variant selection
- Persistent conversations across page navigation
- Customizable appearance with colors, banners, and positioning
1
Customize your widget appearance
Click on the “Growth tool kit” section of the menu. From there select the Onsite Widget integration block and personalize your widget.You can customize:
- Colors: Background, bubble, and icon colors
- Text: Dialog title, welcome message, and bubble text
- Position: Bottom-right corner or right-center of the screen
- Banner image: Display a promotional image at the top of the chat
- Popular questions: Suggested questions for customers to ask
2
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:
The code will look something like this:
The onsite widget uses the
<textyess-ai-widget> tag, which is different from the WhatsApp bubble widget (<textyess-bubble-widget>).3
Go to Appearance > Editor
Once inside your store click on “Appearance” from the menu on the right.
From there click on “Editor”
From there click on “Editor”

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


5
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.
Once again, more than one header pattern may shown. Click the one in which you want to show the widget.

6
Edit and save the code
Go to 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.
<!-- /wp:group --> Once you have edited the code, click save in the upper right corner.

Congratulations, we are live!
Customization Options
You can customize the onsite widget by adding attributes to the<textyess-ai-widget> tag: