Webchat

Configure Client

Setting up webchat profiles and stub data for webchat

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. Once you have completed configuring your profile name and description. Scroll to the bottom and click Create.

5. Manage will save your profile and refresh.

6. Scroll to the bottom of your new profile and Click Open webchat client. This is a quick way to test your webchat without needing to create 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. To quickly test your webchat, select your branch (live or draft)

2. This will open 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

You can configure webchat directly in a stub's data without using a profile. This is useful for specific use cases where you need more direct control.

# Setup Configuration in Stub.data

1. First, 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_configs": {
       "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"
      },
      "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: When using the stub.data method, Heimdall routing is not supported. This method is best for simple, direct webchat implementations.