Webchat Plugin
A tool for webchat widget customization and easy implementation into your website, app and mobile channels.
Last updated
A tool for webchat widget customization and easy implementation into your website, app and mobile channels.
Last updated
Adding a chat widget to your website, app, and mobile channels has become even easier. Now, you can customize the widget's appearance with a few clicks, preview its look, and publish it seamlessly.
The platform enables you to create a personalized webchat solution that perfectly matches your brand identity, ensuring a dynamic user experience.
This step-by-step guide will walk you through the process of customizing and adding a webchat widget from Syntphony CAI’s Cockpit.
To access the customization page, access the Channels page on the side menu and then choose the channel.
Start the customization by providing a name for your virtual agent, along with a description and the message that will appear in the customer's text box. As you fill out the fields, you can already preview on the left how it’ll look. 🤩
Explore the wide variety of color options and find the perfect fit for your brand. For that, just click the color picker icon to see the options. You're able to select your preferred theme for:
Header
Background
Texts
Buttons
Minimized icon
Footer
Syntphony CAI supports hundreds of colors using the HEX notation (a six-digit combination of numbers and letters defined by its mix of red, green and blue, or RGB). You can use the color pick to choose between solid or gradient.
You can check sites like https://www.color-hex.com/ to copy the HEX code and paste it into the corresponding field.
Now it’s time to upload an image. Syntphony CAI allows you to upload an image for your avatar or background.
Click on the “link” icon and paste the URL into the designated field. Make sure the image format is one of the accepted types: JPG, JPEG, PNG, SVG, or GIF, with a maximum size of 1MB. The recommended dimensions are 40x40px.
However, you have the option to skip this step. In this case, the default image displayed for the avatar will be this adorable little robot icon (as seen below) and a solid light blue background.
The customization also covers 27 different types of fonts and 6 different sizes for:
Header
Dialog texts
Buttons
Footer
Once you’ve finished the customization, simply copy the generated script into your HTML to easily integrate it into your website or app.
The generated script will remain the same even if you change the settings, so you may edit it without the need to update your HTML again.
Don’t forget to save the changes. 😊
