diff --git a/_snippets/chat/chat-buttons.mdx b/_snippets/chat/chat-buttons.mdx
new file mode 100644
index 0000000..82ef897
--- /dev/null
+++ b/_snippets/chat/chat-buttons.mdx
@@ -0,0 +1,21 @@
+```typescript
+Plain.init({
+ // ...Other options
+
+ chatButtons: [{
+ {
+ // Optional. The name of the icon to display, see above for full options
+ icon: 'bulb',
+
+ // The text to display on the button
+ text: 'Give feedback',
+
+ // Optional. Allows you to set fields for the threads which are created with this button. See above for full options.
+ threadDetails: {};
+
+ // Optional. Form elements which the user must fill out before sending a chat message. See below for full options.
+ form: {},
+ }
+ }]
+})
+```
\ No newline at end of file
diff --git a/_snippets/chat/chat-forms.mdx b/_snippets/chat/chat-forms.mdx
new file mode 100644
index 0000000..2280925
--- /dev/null
+++ b/_snippets/chat/chat-forms.mdx
@@ -0,0 +1,39 @@
+```typescript
+
+Plain.init({
+ // ...Other options
+ chatButtons: [{
+ {
+ // ...Other chat button options
+ form: {
+ // The fields which make up the form. All form fields must be filled in for a user to send a chat message
+ fields: [
+ {
+ // Currently only dropdown form fields are supported
+ type: 'dropdown',
+
+ // Optional. The placeholder text displayed on the dropdown
+ placeholder: 'Select a topic...',
+
+ // The options which are available in the dropdown, minimum of 1 required.
+ options: [
+ {
+ // Optional. An icon to be displayed on the dropdown option. See above for full options.
+ icon: 'bug',
+
+ // The text which is displayed for this dropdown option
+ text: 'Bug report',
+
+ // Optional. Enables setting values on threads when this option is selected by the user. See above for full options
+ threadDetails: {},
+ }
+ ],
+ }
+ ]
+ },
+ }
+ }]
+})
+
+
+```
\ No newline at end of file
diff --git a/_snippets/chat/customization.mdx b/_snippets/chat/customization.mdx
index e012a88..04f7f88 100644
--- a/_snippets/chat/customization.mdx
+++ b/_snippets/chat/customization.mdx
@@ -50,6 +50,7 @@ Plain.init({
// Optional. Various styling options
// Colors can also be passed in this format { light: '#FFFFFF', dark: '#000000' }. Based on the theme chosen by you or browser preference
style: {
+ brandColor: '#22C55E'; // This will be used in various places in the chat widget such as the primary chat button and send message button
launcherBackgroundColor: '#000000'; // These can also be passed in this format { light: '#FFFFFF', dark: '#000000' }
launcherIconColor: '#FFFFFF';
}
@@ -64,66 +65,12 @@ Plain.init({
// Optional. Allows you to set fields for the threads which are created from chats
threadDetails: {
-
- // Optional. Labels to be set on created threads.
- // To find a label id open the Plain app and go to 'Settings' -> 'Labels', you can select `Copy label ID` from the overflow menu on each label
- labelTypeIds: ['lt_01JDAB92EBHP3DSXS43DW96WBS'],
-
- // Optional. A tier to be set on created threads.
- // To find a tier ID open the Plain app and go to 'Settings' -> 'Tiers'. Select a tier and then copy the ID from the URL.
- // You can also specify a tier by its external ID e.g { externalId: 'example_external_id' }
- tierIdentifier: { tierId: 'tier_01JDABCAZBDFKH7WA6WNBDSA2F' },
-
- // Optional. A tenant to be set on created threads.
- // To find a tenant ID open the Plain app and click 'Tenants' under 'Browse' in the left sidebar. Select a tenant and then copy the ID from the URL.
- // You can also specify a tenant by its external ID e.g { externalId: 'example_external_id' }
- tenantIdentifier: { tenantId: 'te_01HT539973HNVZFSDXWHPT8FH1' },
-
- // Optional. An external ID to be set on created threads.
- externalId: 'example_external_id';
+ // See the data model documentation for more information on these fields
};
// Optional. Lets you customize the buttons which are used to start a new chat on the intro screen
chatButtons: [
- {
- // Optional. The name of the icon to display, see above for full options
- icon: 'bulb',
-
- // The text to display on the button
- text: 'Give feedback',
-
- // Optional. Allows you to set fields for the threads which are created with this button. See above for full options.
- threadDetails: {};
-
- // Optional. Form elements which the user must fill out before sending a chat message
- form: {
-
- // The fields which make up the form. All form fields must be filled in for a user to send a chat message
- fields: [
- {
- // Currently only dropdown form fields are supported
- type: 'dropdown',
-
- // Optional. The placeholder text displayed on the dropdown
- placeholder: 'Select a topic...',
-
- // The options which are available in the dropdown, minimum of 1 required.
- options: [
- {
- // Optional. An icon to be displayed on the dropdown option. See above for full options.
- icon: 'bug',
-
- // The text which is displayed for this dropdown option
- text: 'Bug report',
-
- // Optional. Enables setting values on threads when this option is selected by the user. See above for full options
- threadDetails: {},
- }
- ],
- }
- ]
- },
- }
+ // See the chat buttons documentation for more information on these fields
];
});
```
diff --git a/_snippets/chat/thread-details.mdx b/_snippets/chat/thread-details.mdx
new file mode 100644
index 0000000..1f79d87
--- /dev/null
+++ b/_snippets/chat/thread-details.mdx
@@ -0,0 +1,24 @@
+```typescript
+Plain.init({
+ // ...Other options
+
+ threadDetails: {
+ // Optional. Labels to be set on created threads.
+ // To find a label id open the Plain app and go to 'Settings' -> 'Labels', you can select `Copy label ID` from the overflow menu on each label
+ labelTypeIds: ['lt_01JDAB92EBHP3DSXS43DW96WBS'],
+
+ // Optional. A tier to be set on created threads.
+ // To find a tier ID open the Plain app and go to 'Settings' -> 'Tiers'. Select a tier and then copy the ID from the URL.
+ // You can also specify a tier by its external ID e.g { externalId: 'example_external_id' }
+ tierIdentifier: { tierId: 'tier_01JDABCAZBDFKH7WA6WNBDSA2F' },
+
+ // Optional. A tenant to be set on created threads.
+ // To find a tenant ID open the Plain app and click 'Tenants' under 'Browse' in the left sidebar. Select a tenant and then copy the ID from the URL.
+ // You can also specify a tenant by its external ID e.g { externalId: 'example_external_id' }
+ tenantIdentifier: { tenantId: 'te_01HT539973HNVZFSDXWHPT8FH1' },
+
+ // Optional. An external ID to be set on created threads.
+ externalId: 'example_external_id';
+ }
+});
+```
\ No newline at end of file
diff --git a/auto-responses.mdx b/auto-responses.mdx
index baddf3a..9283159 100644
--- a/auto-responses.mdx
+++ b/auto-responses.mdx
@@ -13,6 +13,7 @@ When you configure an auto-responses, you can choose which channels it will be u
- `Slack`: threads started from Slack
- `Api`: threads that you create programmatically
- `Email`: threads created from an inbound email
+- `Chat`: threads created from a chat session
An auto-response will trigger when a new thread is created. Plain adds a little delay (approximately one minute) before sending the message to give your users a chance to reply.
diff --git a/chat.mdx b/chat.mdx
index edbab6b..f3b4c52 100644
--- a/chat.mdx
+++ b/chat.mdx
@@ -23,8 +23,7 @@ Here’s how to get started:
You can customize some aspects of the Chat widget by providing additional information to the
- `Plain.init` function. These are the available options:
-
+ `Plain.init` function. [Learn more about customization here](/chat/customization).
You can add conditional auto-responses to chat by heading to the "auto-responses" section of
diff --git a/chat/customization.mdx b/chat/customization.mdx
new file mode 100644
index 0000000..9b49ebe
--- /dev/null
+++ b/chat/customization.mdx
@@ -0,0 +1,51 @@
+---
+title: 'Customization'
+---
+
+## General customization
+
+You can customize the chat widget to match your brand and user experience. You can change various aspects of the chat widget including both the appearance and behavior.
+
+
+
+
+
+## Enhance your chat flows with Plain’s data model
+
+Plain’s chat widget is designed to be flexible and powerful. You can use Plain’s data model to enhance your chat flows, providing a more tailored experience for your users and
+improving your ability to triage and respond.
+
+You can currently set the following fields on threads created from the chat widget:
+* Labels
+* Tiers
+* Tenants
+* External IDs
+
+There are several places in the configuration you can add these with varying effects:
+
+### All threads
+
+Providing a top-level `threadDetails` object in the `Plain.init` function will set these fields on all threads created from the chat widget. You could, for example,
+set a label based on the page the user is on.
+
+
+
+
+
+### Chat buttons
+
+Aside from being able to customize the text and icon of the chat button, you can also provide a set of fields that will be set on the thread when the user clicks that specific button.
+
+You can add these by providing a `threadDetails` object to an item within `chatButtons` array. For example, you could add a button for users to report a bug, which would set a label on the thread to `Bug report`.
+
+
+
+
+
+### Chat forms
+
+Similar to chat buttons, chat forms allow you to set fields on the thread when the user creates a chat. These are specific to each `chatButton`.
+
+
+
+
diff --git a/mint.json b/mint.json
index 171b7c0..699d006 100644
--- a/mint.json
+++ b/mint.json
@@ -89,7 +89,7 @@
},
{
"group": "Chat",
- "pages": ["chat", "chat/authentication"]
+ "pages": ["chat", "chat/customization", "chat/authentication"]
},
{
"group": "Microsoft Teams",
diff --git a/public/images/chat-buttons.png b/public/images/chat-buttons.png
new file mode 100644
index 0000000..12f4cc5
Binary files /dev/null and b/public/images/chat-buttons.png differ