Webchat

Configure Client

Explains Webchat client configuration through profiles or stub data. Useful for launching, testing, branding, and controlling Webchat behavior.

There are two ways to configure your webchat client:

1. Using a webchat profile (recommended for most cases)
2. Configuring directly in stub.data (useful for specific use cases)

# Configure via Webchat Profile

# Create Webchat Profile

1. Navigate to Manage. Under Config Select Notifications

2. Navigate into Webchat/Webchat Profiles

3. Create a new profile.

4. After setting the profile name and description, scroll to the bottom and click Create.

5. Manage saves your profile and refreshes.

6. Scroll to the bottom of your new profile and click Open webchat client to test your webchat without creating a webpage.

# Testing Webchat Using Profiles

• In profiles there are 2 branches: live and draft

• The Draft branch will be where most testing and development is done.

• The Live branch should be reserved for live environments.

# Opening Webchat Client Using Profile UUID

1. Select your branch (live or draft)

2. This opens a webpage with the webchat client embedded

   • Example of a webchat client using the live branch: Live Webchat client
   • Example of a webchat client using the draft branch: Draft Webchat client

Note: When naming the webchat in a draft branch, "draft" will be automatically prefixed onto the Chat name.

# Updating Webchat Profiles

• Make sure you are on the correct branch when updating a profile (live or draft)
• Changes made to both branches will automatically update

# Configure via Stub.data

Configure webchat directly in a stub's data without a profile, for cases needing more direct control.

# Setup Configuration in Stub.data

1. Set up a savedata task with the config object below as the savevalue
2. Run the action in your target stub
3. In stub.data, you'll now have stub.data._webchat_config

        "savedata": {
  "tasktype": "savedata",
  "params": {
    "fieldname": "_webchat_config",
    "savevalue": {
      "enabled": true,
      "webchat_client_config": {
       "display_settings": {
          "open_button": {
            "button_types_config": {
              "svg_url": {
                "size": {
                  "width": 50
                },
                "enabled": false,
                "url": ""
              }
            }
          },
          "open_on_load": true,
          "open_on_load_timeout_seconds": 0,
          "open_on_load_timeout_milliseconds": 0,
          "fullscreen": false,
          "fullscreen_toggle": false,
          "css": {
            "--primary-color": "#0967d2",
            "--border-color": "#0967d2",
            "--text-color": "#ffffff"
          },
          "powered_by_enabled": false
        },
        "chat_agent": {
          "name": "Kelly"
        },
        "voice_notes": {
          "enabled": true
        },
        "file_uploads": {
          "enabled": true
        },
        "links": {
          "open_in_new_tab": true
        },
        "opening_message": {
          "enabled": true,
          "webchat_message": {
            "type": "text",
            "value": "This message will be sent on an initial connection CONFIG FROM STUB"
          }
        },
        "webchat_title": "Stubber",
        "opening_banner": {
          "enabled": false,
          "banner_content": {
            "type": "markdown",
            "value": "**Opening banner**"
          }
        }
      },
      "webchat_headless_config": {
        "custom": "json"
      },
      "webchat_hosted_config": {
        "display_settings": {
          "navbar": {
            "custom_org_label": {
              "enabled": false,
              "label": "testing"
            },
            "custom_icon": {
              "enabled": false,
              "url": ""
            }
          }
        }
      }
    } 
  }
}

      

# Using Your Configured Stub with Webchat

Once your stub has the configuration object, you can use your stubref as a parameter:

        https://webchat.notifications.stubber.com/v2/client?stubref=YOUR_STUBREF

      

Or embed it in HTML:

        <stubber-webchat stubref="YOUR_STUBREF"></stubber-webchat>

      

# Routing Methods with Stub Configuration

When using stub.data configuration:

• First messages from users are directly sent to your stub
• Webchat data received is placed in stub.data._incoming_webchat_data
• The default action that is executed on a stub is _update_from_webchat

Note: The stub.data method does not support Heimdall routing. It is best for simple, direct webchat implementations.