Embedding the Webchat Widget

This guide explains how to embed the widget into your website and mobile applications, customize its appearance using CSS and rem units.

Buzzeasy provides an easy-to-use code snippet for adding the webchat widget as a child of the <body> element in your website. Developers can also specify one or more font families to be used by the widget. If no font families are explicitly defined, the widget may inherit these properties from your site’s default styles.

You can grab the widget code snippet from the Buzzeasy Portal:

Chat menu > Webchat > Select the channel > Channel Details > Website code snippet.

Code Snippet Example

Insert the following snippet into your website’s HTML:

html

<!DOCTYPE html>
<html style="font-size: 1vw;">
  <head>
    <style>
      /* Optional: Override widget font-family */
      #buzzeasy-webchat {
        font-family: 'Cursive', sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>Widget Demo</h1>
    <!-- Insert the widget's container element -->
    <div id="buzzeasy-webchat" data-webchat-url="YOUR_WIDGET_URL"></div>
    <!-- Include the widget script (deferred loading recommended) -->
    <script defer src="YOUR_WIDGET_SCRIPT_URL"></script>
  </body>
</html>

The chat widget uses rem units (root em) to ensure consistency in font size and spacing throughout the user interface. The value of 1rem is based on the font size of the HTML element (typically 16px by default). You can control the widget's overall sizing by adjusting the font size on the <html> tag.

Examples of Sizing Adjustments

Fixed Font Size:

Set the font size to 24 pixels:

html

<html style="font-size: 24px;">
  <!-- Rest of your code -->
</html>

Relative to Viewport Width:
Make the font size relative to 1% of the viewport width:
html
```
<html style="font-size: 1vw;">
  
</html>
```
Using Clamp for Responsive Sizing:
Set the font size relative to the width of the viewport while defining a minimum and maximum:
html
```
<html style="font-size: clamp(16px, 1vw, 64px);">
  
</html>
```

For mobile applications, Buzzeasy offers a mobile-friendly widget webpage that can be embedded via Web-Based Content (Android) or Webkit (iOS). The mobile integration leverages local storage to retain various Buzzeasy settings, so it is essential that the hosting environment supports local storage access.

Navigate to the Buzzeasy Portal:
- Chat menu > Webchat > Select the channel > Channel Details > Integration page URL.

Click the copy icon to obtain a URL in the following format:

https://webchat.buzzeasy.com/?tenantId=<yourTenantId>&channelId=<yourChannelId>

You may also host the widget on your own webserver. To display the widget in full screen (i.e., without a bubble that the user must tap), include the parameter data-webchat-standalone="true" in your widget container.

html

<div id="buzzeasy-webchat" data-webchat-url="YOUR_MOBILE_WIDGET_URL" data-webchat-standalone="true"></div>

Tip: If you choose to self-host the widget, you retain full control over its appearance and behavior, benefiting from the same customization options described for web integration.

Passing External Data in mobile environment via URL Parameters

When embedding the widget in a mobile environment, you can pass external customer and workflow data directly through URL parameters. This data is read by the widget during initialization.

URL parameters:

Customer data: customer_firstName, customer_lastName, customer_email, customer_phone
Workflow data: Specify any key-value pairs prefixed with workflow_ (e.g., workflow_orderId, workflow_productId).

For further assistance or to explore more advanced customizations (like color schemes, and more), refer to the Buzzeasy Webchat Widget documentation.

Custom bots