Preview your Web Widget
Last updated
Last updated
After creating your Web Widget, you can preview how it looks like right from the Captivate Chat platform!
This is the same Widget Code that appears in the final step of Channel: Web Widget instructions.
Give the Widget Code to your Web Administrator!
If you want your web widget to appear on your live website, you must copy this Widget Code and give it to your Web Administrator.
When you click View Widget, your browser will open a new window that says Captivate Chat - Widget Preview.
This is the place where you can check how your Web Widget looks like even before you plug in the code to your actual website.
Notice how your Widget Icon is on the lower right of the screen.
Clicking your Widget Icon reveals a prototype of the Chatbot.
This prototype is fully functional, with both your set visual settings and included AI training. You can ask it questions and see its responses. Thanks to this process, you can see all aspects of your Chatbot before it's even deployed to your system.
Share URL: Copy the URL of this Widget Preview so you can share it with your teammates.
API Key: The API Key of the Web Widget.
Background: You can customize the Background of this Widget Preview.
Under Select Background Type, you can choose either a Web or Image as the source of your Background Asset:
Web: You can enter any URL to "copy" its background. This reveals how the Web Widget can appear in a live website.
Image: You can upload an image that becomes the background of the Web Widget. This is useful if you're still designing your website. Its resolution should be 1980 x 1080.
Use the static preview to change the colors of your Web Widget!
You can use the static preview as a "reference" on how your Web Widget looks like in action. Check whether your chosen Options (Text, Color, Image) fit your overall aesthetic and branding.
Use this opportunity to make the appropriate changes before you implement this Web Widget in your live website.
From your list of Chat Flows, hover your cursor over the icon. It should become clickable. Once you press it, the Widget Code should appear.
Click to see your Web Widget in a live preview.
Clicking the on the upper right of the preview site will reveal more customization options. With this new window, you can:
Click once you're ready to apply the new background. This shows a static (non-moving) version of your source URL or image. You can still interact with your Web Widget prototype like in the first version of the preview. However, this time you can now see how your Web Widget looks like when placed in your website.
