Preview your Web Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
After creating your Web Widget, you can preview how it looks like right from the Captivate Chat platform!
From your list of Chat Flows, hover your cursor over the Web Chat icon. It should have two buttons:
This is the same Widget Code that appears in the final step of Channel: Web Chat 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.
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.
Web Chat Preview: Click the eye symbol to preview your Web Chat.
Web Chat Widget Code: Click the code symbol to get your Web Chat's Widget Code
Access your Web Chat's Widget Code by clicking the code icon. You can toggle between the Web Widget code and the In Page code.
When you click the eye symbol, your browser will open a new window that says Captivate Chat - Widget 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.
