Advanced Configuration

Embedded

# Overview

Embedded webchat offers a range of advanced configuration options for creating customized chat experiences on your website. This section covers:

• 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

When interacting with the webchat client, you'll need to use specific notification parameters to send messages, forms, and update client settings.

# Basic Payload

To send a payload, you need to know the webchat client sessionuuid. You may send any combination of message and client configuration in a single payload:

        {
  "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 complete control over the webchat UI, you can use the headless mode to build your own custom interface. This requires including the webchat core script:

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

      

This makes the StubberWebchatCore object available globally, providing methods for connecting to and interacting with the webchat service.

For detailed information on building your own interface, see the Control Channels section.