search
Ctrlk

Preview your Web Widget

After creating your Web Widget, you can preview how it looks like right from the Captivate Chat platform!

hashtag
Accessing your Web Widget

After creating a Web Widget Chat Flow, go to Setup > Chat Flows in Captivate Chat. Look for your new Web Widget Chat Flow. It should say "Web Chat" under the Channel column.
After creating a Web Widget Chat Flow, go to Setup > Chat Flows in Captivate Chat. Look for your new Web Widget Chat Flow. It should say "Web Chat" under the Channel column.

From your list of Chat Flows, hover your cursor over the Web Chat icon. It should have two buttons:

  • 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

hashtag
Widget Code

The Widget Code window is seen after clicking the code icon (the "<>" sign) under the Channel column of your Web Chat Chat Flow. It shows the code of your Web Chat that you can give to your Web Administrator, as well as a "View Widget" button to see a live preview of your Web Widget in a sample webpage.

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.

This is the same Widget Code that appears in the final step of Channel: Web Chat instructions.

circle-exclamation

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.

hashtag
Widget Preview

The Widget Preview shows a live preview of a Web Widget in a sample webpage within Captivate Chat.
The Widget Preview shows a live preview of a Web Widget in a sample webpage within Captivate Chat.

When you click the eye symbol, 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.

hashtag
Testing the Web Widget

Clicking your web widget icon on the lower-right of the Web Widget Preview webpage shows your Web Widget. Click the "Start" button to start interacting with it.
Clicking your web widget icon on the lower-right of the Web Widget Preview webpage shows your Web Widget. Click the "Start" button to start interacting with it.

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.

hashtag
Customizing the Web Widget Preview

Click the "Page Settings" button on the upper right of the Web Widget Preview webpage. This shows a new window called Page Settings where you can share your page URL, get an API key, change the background, and even hide the welcome banner for a more immersive experience.
Click the "Page Settings" button on the upper right of the Web Widget Preview webpage. This shows a new window called "Page Settings" where you can share your page URL, get an API key, change the background, and even hide the welcome banner for a more immersive experience.

Clicking the Click the "Page Settings" button on the upper right of the Web Widget Preview webpage. This shows a new window called Page Settings where you can share your page URL, get an API key, change the background, and even hide the welcome banner for a more immersive experience. on the upper right of the preview site will reveal more customization options. With this new window, you can:

  • 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.

hashtag
Background

The "Background Type" section of the "Page Settings" window of the Web Widget Preview webpage can let users paste a URL of their choice or upload an image that can act as a static sample background for their Web Widget.
The "Background Type" section of the "Page Settings" window of the Web Widget Preview webpage can let users paste a URL of their choice or upload an image that can act as a static sample background for their Web Widget.

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.

The Web Widget Preview webpage changes into the static background of your choice after uploading an image or inserting a URL in the "Background Type" section.
The Web Widget Preview webpage changes into the static background of your choice after uploading an image or inserting a URL in the "Background Type" section.

Click After uploading an image in the "Background Type" of the "Page Settings" of the Web Widget Preview webpage, click "Apply" in "Page Settings" to apply the changes. 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.

circle-info

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.

PreviousChannel: Web ChatNextChannel: Facebook

Last updated