Menu
Feedback
Start here
Tutorials


Tutorials
Integrations
How to Create a Web Channel
2 min read

When integrating the web channel, you can customize aspects of the Web Chat such as color, message spacing time, message indicators, avatar, and much more! This way, you ensure that the Weni Platform offers everything tailored to your brand. Below, we’ll guide you step by step to complete the integration.​

Creating a Web Channel

  1. Access the organization: To integrate your chatbot with a web channel, first enter the organization where the project is located.
  2. Locate the project: Find the project you want to integrate with the web channel.
  3. In the sidebar, click on Applications.
  4. By clicking Applications > Discovery, select the Weni Web Chat option.
  5. Click the Access My Applications button, and then click on the Weni Web Chat card once again to access the customization settings.

{"base64":"  ","img":{"width":629,"height":497,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":46238,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/weni-by-vtex/integrations/how-to-create-a-web-channel_1.png"}}

  1. When you open the Weni Web Chat customization panel, you will have the following options to configure:
  • Chat Title;
  • Chat Subtitle (optional);
  • Trigger Message: When enabled, it is the first message your chatbot sends (optional);
  • Chat Notification Message (optional);
  • Show Full-Screen Button (optional);
  • Unread Messages Indicator (optional);
  • Keep Message History (optional);
  • Time Between Messages.

These options allow you to tailor the chat experience to better match your brand and user preferences.

{"base64":"  ","img":{"width":1902,"height":934,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":133602,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/weni-by-vtex/integrations/how-to-create-a-web-channel_2.png"}}

  1. Moving on to the Appearances tab, you have the option to customize the chat using CSS. Additionally, you can upload an image in PNG, JPG, or JPEG format to serve as your avatar, and you can also change the chat's color to match your brand.

{"base64":"  ","img":{"width":1295,"height":915,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":97965,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/weni-by-vtex/integrations/how-to-create-a-web-channel_3.png"}}

  1. After completing the customization, to install the Weni Web Chat on your website, copy the code that will appear when you click on script code, and paste it above the last </body> tag on your website.

{"base64":"  ","img":{"width":1303,"height":891,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":85411,"url":"https://raw.githubusercontent.com/vtexdocs/help-center-content/refs/heads/main/docs/en/tutorials/weni-by-vtex/integrations/how-to-create-a-web-channel_4.png"}}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
How to create a channel with WhatsApp Demo
« Previous
How to create an SMS channel
Next »
Contributors
1
Photo of the contributor
+ 1 contributors
On this page
Still got questions?
Ask the community
Find solutions and share ideas in the VTEX Community
Join our community
Request VTEX support
For personalized assistance, contact our experts
Open a support ticket
GitHubDeveloper PortalCommunityFeedback