1. Advanced Configuration
  2. Embedded

Advanced Configuration

Embedded

Explains advanced configuration for embedded Stubber Webchat. Useful for custom payloads, control events, browser integration, and embedded chat behavior.

Overview

Advanced configuration options for embedded webchat:

  • Control channels for bidirectional communication between webpage and stub
  • Custom notification parameters for rich messaging
  • Headless mode for building your own custom interface
  • Advanced embedding options for different UI requirements

Notification Parameters

Use these notification parameters to send messages, forms, and update client settings.

Basic Payload

Sending a payload requires the webchat client sessionuuid. A single payload may combine a message and client configuration:

        {
  "platforms": {
    "webchat": {
      "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
    }
  }
}

Sending a Message

To send a message, add webchat_message to the webchat object:

        {
  "webchat": {
    "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
    "webchat_message": {
      "type": "markdown",
      "value": "Your message was received by stubber. This is an example of a reply"
    }
  }
}

Message with Custom Agent Name

Add webchat_agent to the webchat object:

        {
  "webchat": {
    "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
    "webchat_agent": {
      "name": "AI assistant"
    },
    "webchat_message": {
      "type": "markdown",
      "value": "Your message was received by stubber. This is an example of a reply"
    }
  }
}

Sending a Form

        {
  "webchat": {
    "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
    "webchat_agent": {
      "name": "AI assistant"
    },
    "webchat_message": {
      "type": "form",
      "value": {
        "form_name": "email_form",
        "spec": {
          "fields": {
            "email": {
              "fieldtype": "email"
            },
          },
        },
      }
    }
  }
}

Client Settings

To update client settings, add webchat_client_configuration to the webchat object:

        {
  "webchat": {
    "sessionuuid": "~~stub.data._incoming_webchat_data.sessionuuid",
    "webchat_client_configuration": {
      "setting_one": {
        "type": "default_country_code",
        "value": "ZA"
      }
      // you may add multiple setting objects in one payload
    }
  }
}

Building Your Own Interface

For full control over the webchat UI, use headless mode. Include the webchat core script:

        <script defer src="https://webchat.notifications.stubber.com/v2/client/core.js"></script>

This exposes the global StubberWebchatCore object, with methods for connecting to and interacting with the webchat service.

See Control Channels for details.

Previous <- Heimdall Routing
Next Webchat control channels ->