Chat doc updates to cover chat buttons, forms, brand color

_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: {},
+    }
+  }]
+})
+```

_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: {},
+              }
+            ],
+          }
+        ]
+      },
+    }
+  }]
+})
+
+
+```

_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
   ];
 });
 ```

_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';
+  }
+});
+```

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.
 

chat.mdx

@@ -23,8 +23,7 @@ Here’s how to get started:
   </Step>
   <Step title="Customize your Chat experience">
     You can customize some aspects of the Chat widget by providing additional information to the
-    `Plain.init` function. These are the available options:
-    <Snippet file="chat/customization.mdx" />
+    `Plain.init` function. [Learn more about customization here](/chat/customization).
   </Step>
   <Step title="Add conditional auto-responses">
     You can add conditional auto-responses to chat by heading to the "auto-responses" section of

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.
+
+<Accordion title="General customization code">
+  <Snippet file="chat/customization.mdx" />
+</Accordion>
+
+## 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.
+
+<Accordion title="Thread details code">
+  <Snippet file="chat/thread-details.mdx" />
+</Accordion>
+
+### 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`.
+
+<Accordion title="Chat buttons code">
+  <Snippet file="chat/chat-buttons.mdx" />
+</Accordion>
+
+### 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`.
+
+<Accordion title="Chat forms code">
+  <Snippet file="chat/chat-forms.mdx" />
+</Accordion>

mint.json

@@ -89,7 +89,7 @@
 				},
 				{
 					"group": "Chat",
-					"pages": ["chat", "chat/authentication"]
+					"pages": ["chat", "chat/customization", "chat/authentication"]
 				},
 				{
 					"group": "Microsoft Teams",