diff --git a/api-reference/ui-components.mdx b/api-reference/ui-components.mdx
index ae996ca..fd70807 100644
--- a/api-reference/ui-components.mdx
+++ b/api-reference/ui-components.mdx
@@ -19,7 +19,7 @@ For example - this is a button that links to Stripe.
and it looks like this:
- ![Example button linking to stripe](/public/images/ui-components/link-button-stripe.png)
+ ![Example button linking to stripe](/public/images/ui-component-link-button-stripe.png)
In the GraphQL API schema, we have two separate unions for Custom Timeline Entry Components and Customer Card
diff --git a/api-reference/ui-components/badge.mdx b/api-reference/ui-components/badge.mdx
index 8750fe9..e97810c 100644
--- a/api-reference/ui-components/badge.mdx
+++ b/api-reference/ui-components/badge.mdx
@@ -3,7 +3,7 @@ title: 'Badge'
description: 'Useful for statuses or when you need to attract attention to something.'
---
-![Example badges](/public/images/ui-components/badge.png)
+![Example badges](/public/images/ui-component-badge.png)
A badge has the following properties:
diff --git a/api-reference/ui-components/copy-button.mdx b/api-reference/ui-components/copy-button.mdx
index 61b9ef9..d48a800 100644
--- a/api-reference/ui-components/copy-button.mdx
+++ b/api-reference/ui-components/copy-button.mdx
@@ -3,7 +3,7 @@ title: 'CopyButton'
description: 'Useful if you have any IDs or other details you want to copy for use in messages or outside of Plain.'
---
-![Example copy button](/public/images/ui-components/copy-button.png)
+![Example copy button](/public/images/ui-component-copy-button.png)
A copy button has the following properties:
diff --git a/api-reference/ui-components/divider.mdx b/api-reference/ui-components/divider.mdx
index 15032bf..159d253 100644
--- a/api-reference/ui-components/divider.mdx
+++ b/api-reference/ui-components/divider.mdx
@@ -3,7 +3,7 @@ title: 'Divider'
description: 'Useful when you need a bit of structure.'
---
-![Example divider](/public/images/ui-components/divider.png)
+![Example divider](/public/images/ui-component-divider.png)
A divider has the following properties:
diff --git a/api-reference/ui-components/link-button.mdx b/api-reference/ui-components/link-button.mdx
index fa0ec65..a8bba4a 100644
--- a/api-reference/ui-components/link-button.mdx
+++ b/api-reference/ui-components/link-button.mdx
@@ -3,7 +3,7 @@ title: 'LinkButton'
description: 'Useful when you want to link somewhere external (e.g. your own admin tool or payment provider)'
---
-![Example link button](/public/images/ui-components/link-button.png)
+![Example link button](/public/images/ui-component-link-button.png)
A link button has the following properties:
diff --git a/api-reference/ui-components/plain-text.mdx b/api-reference/ui-components/plain-text.mdx
index f96f553..df89aa1 100644
--- a/api-reference/ui-components/plain-text.mdx
+++ b/api-reference/ui-components/plain-text.mdx
@@ -3,7 +3,7 @@ title: 'PlainText'
description: 'Useful when you want to show any text that should not have any formatting (is not Markdown). If you want markdown please use [Text](/ui-components/text).'
---
-![Example link button](/public/images/ui-components/plain-text.png)
+![Example link button](/public/images/ui-component-plain-text.png)
The plain text component has the following properties:
diff --git a/api-reference/ui-components/row.mdx b/api-reference/ui-components/row.mdx
index 88c2424..edeefaf 100644
--- a/api-reference/ui-components/row.mdx
+++ b/api-reference/ui-components/row.mdx
@@ -3,7 +3,7 @@ title: 'Row'
description: 'Useful when you need to show two things next to each-other.'
---
-![Example row](/public/images/ui-components/row.png)
+![Example row](/public/images/ui-component-row.png)
The row component has the following properties:
diff --git a/api-reference/ui-components/spacer.mdx b/api-reference/ui-components/spacer.mdx
index 5a08d4f..82bf159 100644
--- a/api-reference/ui-components/spacer.mdx
+++ b/api-reference/ui-components/spacer.mdx
@@ -2,7 +2,7 @@
title: 'Spacer'
---
-![Example spacer](/public/images/ui-components/spacer.png)
+![Example spacer](/public/images/ui-component-spacer.png)
A link button has the following properties:
diff --git a/api-reference/ui-components/text.mdx b/api-reference/ui-components/text.mdx
index 1fb5954..b4b87b3 100644
--- a/api-reference/ui-components/text.mdx
+++ b/api-reference/ui-components/text.mdx
@@ -2,7 +2,7 @@
title: 'Text'
---
-![Example text](/public/images/ui-components/text.png)
+![Example text](/public/images/ui-component-text.png)
The text component has the following properties:
diff --git a/assignment.mdx b/assignment.mdx
index 4227322..66c982e 100644
--- a/assignment.mdx
+++ b/assignment.mdx
@@ -2,4 +2,18 @@
title: 'Assignment'
---
-TODO
+![Assignment within Plain](/public/images/assignment-introduction.png)
+
+Threads can be assigned to any user or machine users in your workspace.
+
+When you start typing a message, Plain will automatically assign you so you typically don't really have to think about assigning yourself manually.
+
+If you want to assign a thread manually you can use the shortcut **A** or use **⌘ + K**
+
+By default in Plain once you are assigned to a thread, you will never be automatically un-assigned. This ensures that if you pick up a support request you can see it through. We call this behaviour "sticky assignment".
+
+If you'd like to change this behaviour you can do so in **Settings** → **Workflow**. Here you can choose to be automatically unassigned when a thread is marked as done or snoozed.
+
+We recommend turning sticky assignment off if your team has a shared support rotas. That way, whoever is on-call can pick up any threads you didn't finish.
+
+If you are interested in building fully automated bots using Plain, you can also programatically assign threads to machine users as a starting point. If this sounds like an interesting use-case to you please reach out to us on via help@plain.com.
diff --git a/contact-forms.mdx b/contact-forms.mdx
index d38e2fc..e173bbb 100644
--- a/contact-forms.mdx
+++ b/contact-forms.mdx
@@ -19,10 +19,7 @@ This shows how you can build a very simple floating contact form (bottom right)
[**View demo ↗**](https://example-nextjs-floating-form.vercel.app/) | [View source on Github↗](https://github.com/team-plain/example-nextjs-floating-form)
-
- ![Screenshot of the floating contact
- form](/public/images/contact-forms/example-floating-contact-form.png)
-
+![Screenshot of the floating contact form](/public/images/contact-form-floating.png)
### Example advanced contact form
@@ -30,7 +27,4 @@ This shows a more advanced contact form in NextJS with structured inputs dependi
[**View demo ↗**](https://example-nextjs-advanced-contact-form.vercel.app/) | [View source on Github↗](https://github.com/team-plain/example-nextjs-advanced-contact-form)
-
- ![Screenshot of the advanced contact
- form](/public/images/contact-forms/example-advanced-contact-form.png)
-
+![Screenshot of the advanced contact form](/public/images/contact-form-advanced.png)
diff --git a/custom.css b/custom.css
index 58a9cdb..28a7711 100644
--- a/custom.css
+++ b/custom.css
@@ -24,7 +24,7 @@
/* Remove tight leading on titles within the content */
.prose :where(h1, h2, h3):not(:where([class~='not-prose'] *)) {
- letter-spacing: auto;
+ letter-spacing: initial;
}
/* Links that are in the content of the page */
diff --git a/customer-cards.mdx b/customer-cards.mdx
index 223ab47..9deb41c 100644
--- a/customer-cards.mdx
+++ b/customer-cards.mdx
@@ -3,10 +3,7 @@ title: 'Customer cards'
description: 'Customer Cards are a powerful feature in Plain that let you show information from your own systems while looking at a customer in Plain. This makes sure you always have important context when helping customers.'
---
-
- ![Screenshot of the Customer Cards
- feature](/public/images/customer-cards/customer-cards-introduction.png)
-
+![Customer Cards within Plain](/public/images/customer-cards-introduction.png)
Customer Cards are:
diff --git a/customer-groups.mdx b/customer-groups.mdx
index d40f9ee..6a3ab01 100644
--- a/customer-groups.mdx
+++ b/customer-groups.mdx
@@ -3,6 +3,8 @@ title: 'Customer groups'
description: 'Organise and segment your customers.'
---
+![Customer groups within Plain](/public/images/groups-introduction.png)
+
Customer groups can be used to organize and segment your customers. For example you could organise your customers by their tier "Free", "Growth, "Enterprise" or use temporary groups to keep track of customers trialing beta features.
You can configure the groups in your workspace by going to **Settings** → **Customer Groups** where you can set a name and color per group.
diff --git a/email/receiving.mdx b/email/receiving.mdx
index 15f6d4f..5801540 100644
--- a/email/receiving.mdx
+++ b/email/receiving.mdx
@@ -21,7 +21,7 @@ If your email provider is not Google, you can still set up email forwarding in d
Under "Default routing" click on "CONFIGURE" or "ADD ANOTHER RULE"
- ![Add new rule](/public/images/email-setup/email-setup-0.png)
+ ![Add new rule](/public/images/email-setup-0.png)
@@ -29,7 +29,7 @@ If your email provider is not Google, you can still set up email forwarding in d
In the dropdown, select "Single recipient" and write your **support email address** under "Email address"
- ![Add your support email address](/public/images/email-setup/email-setup-1.png)
+ ![Add your support email address](/public/images/email-setup-1.png)
@@ -39,7 +39,7 @@ If your email provider is not Google, you can still set up email forwarding in d
Choose "Replace recipient" and paste the inbound email address (`@inbound.postmarkapp.com`)
- ![Replace recipient](/public/images/email-setup/email-setup-2.png)
+ ![Replace recipient](/public/images/email-setup-2.png)
@@ -47,7 +47,7 @@ If your email provider is not Google, you can still set up email forwarding in d
Scroll further down, and choose "Perform this action on non-recognised and recognised addresses"
- ![Apply to all addresses](/public/images/email-setup/email-setup-3.png)
+ ![Apply to all addresses](/public/images/email-setup-3.png)
diff --git a/email/sending.mdx b/email/sending.mdx
index 9a0e556..6c67c1b 100644
--- a/email/sending.mdx
+++ b/email/sending.mdx
@@ -7,7 +7,7 @@ To be able to send emails from Plain using your support email address, you will
While setting up your email, you will see DNS settings that need to be
configured for your domain:
-![DNS settings](public/images/email-setup/email-setup-4.png)
+![DNS settings](public/images/email-setup-4.png)
The first record is the "DKIM". It is part of the available mechanisms that exist to authenticate
emails: verifying that you're the actual sender of the email.
diff --git a/events.mdx b/events.mdx
index 49f0818..e941fd9 100644
--- a/events.mdx
+++ b/events.mdx
@@ -3,7 +3,7 @@ title: 'Events'
description: "Events are a powerful API feature of Plain which let you log key events to have more context while you are helping a customer. This includes tracking a customer's usage of your product, latest invoice, error logs, etc."
---
-![Screenshot of the Events](/public/images/events/events-introduction.png)
+![Screenshot of the Events](/public/images/events-introduction.png)
When you create an event in Plain, you can specify the content of the event using a simple GraphQL request and our [UI Components](/ui-components).
diff --git a/labels.mdx b/labels.mdx
index 4235f26..a573725 100644
--- a/labels.mdx
+++ b/labels.mdx
@@ -1,9 +1,10 @@
---
title: 'Labels'
-description: 'Labels are a light weight and powerful way to categorize threads in Plain.'
---
-![Example labels](/public/images/labels/labels-introduction.png)
+Labels are a light weight and powerful way to categorize threads in Plain.
+
+![Example labels](/public/images/labels-introduction.png)
We recommend categorizing threads into topics so you immediately know, at a glance, what people are getting in touch about.
diff --git a/linear.mdx b/linear.mdx
index a246712..a012f4e 100644
--- a/linear.mdx
+++ b/linear.mdx
@@ -1,14 +1,12 @@
---
title: 'Linear integration'
-description: 'To easily keep track of feature requests and bugs reported in Plain, you can connect your Linear workspace with Plain.'
---
+To easily keep track of feature requests and bugs reported in Plain, you can connect your Linear workspace with Plain.
+
This lets you easily link a Linear issue to a thread.
-
- ![Screenshot of the floating contact
- form](/public/images/linear-integration/linear-integration.png)
-
+![Screenshot of the floating contact form](/public/images/linear-introduction.png)
To do this, head to **Settings** → **Linear integration** and connect your workspace.
diff --git a/mint.json b/mint.json
index b8be119..e08fadf 100644
--- a/mint.json
+++ b/mint.json
@@ -1,9 +1,5 @@
{
- "name": "Plain",
- "modeToggle": {
- "default": "light",
- "isHidden": true
- },
+ "name": "Plain Docs",
"logo": {
"light": "public/logo/light.png",
"dark": "public/logo/dark.png",
@@ -15,6 +11,13 @@
"light": "#94a3b8",
"dark": "#3e7cff"
},
+ "metadata": {
+ "og:image": "/docs/images/social-image.png",
+ "twitter:card": "summary_large_image",
+ "twitter:image": "/docs/images/social-image.png",
+ "twitter:site:domain": "plain.com",
+ "apple-mobile-web-app-title": "Plain Docs"
+ },
"topbarCtaButton": {
"name": "Sign in",
"url": "https://app.plain.com/"
diff --git a/notifications.mdx b/notifications.mdx
index 9d68e75..c386901 100644
--- a/notifications.mdx
+++ b/notifications.mdx
@@ -2,4 +2,22 @@
title: 'Notifications'
---
-TODO
+![Notifications within Plain](/public/images/notifications-introduction.png)
+
+Plain supports Discord, Slack and Email notifications. Notifications are also divided into **Workspace Notifications** and **Personal Notifications**.
+
+### Workspace notifications
+
+Workspace notifications are global to your workspace via Slack and/or Discord. They are typically used to notify you as a team of a new support request or other activity.
+
+We recommend setting up a shared channel like #support and then having all workspace notifications go there.
+
+You can configure workspace notifications in **Settings** → **Workspace**.
+
+### Personal notifications
+
+Personal notifications are via Slack or Email. We recommend setting up notifications here to be notified of threads you are assigned to.
+
+You can configure personal notifications in **Settings** → **Workspace**.
+
+When you use personal Slack notifications they will be delivered in the Plain Slack App direct message channel with you.
diff --git a/priorities.mdx b/priorities.mdx
index c04fb09..e52cdfc 100644
--- a/priorities.mdx
+++ b/priorities.mdx
@@ -2,4 +2,21 @@
title: 'Priorities'
---
-TODO
+![Priorities within Plain](/public/images/priority-introduction.png)
+
+Every thread has a priority. Priorities help you manage your threads queue and identify which threads need attention first.
+
+The available priorities are:
+
+- **Urgent**
+- **High**
+- **Medium**
+- **Low**
+
+When you viewing a thread you can use the shortcut **P** to set the priority or use **⌘ + K**.
+
+When looking at your thread queue you can also filter and sort your thread by priority.
+
+Priorities can be useful in combination with contact forms. By asking questions such as "is this preventing you from using X?" you can determine whether bug reports or questions are high priority.
+
+Equally you can automatically set higher priorities for certain topics like security reports, if your contact form exposes a topic picker.
diff --git a/public/images/assignment-introduction.png b/public/images/assignment-introduction.png
new file mode 100644
index 0000000..87a090b
Binary files /dev/null and b/public/images/assignment-introduction.png differ
diff --git a/public/images/contact-forms/example-advanced-contact-form.png b/public/images/contact-form-advanced.png
similarity index 100%
rename from public/images/contact-forms/example-advanced-contact-form.png
rename to public/images/contact-form-advanced.png
diff --git a/public/images/contact-forms/example-floating-contact-form.png b/public/images/contact-form-floating.png
similarity index 100%
rename from public/images/contact-forms/example-floating-contact-form.png
rename to public/images/contact-form-floating.png
diff --git a/public/images/custom-timeline-entries/cte-examples.png b/public/images/custom-timeline-entries/cte-examples.png
deleted file mode 100644
index bd790b3..0000000
Binary files a/public/images/custom-timeline-entries/cte-examples.png and /dev/null differ
diff --git a/public/images/custom-timeline-entries/example-entry.png b/public/images/custom-timeline-entries/example-entry.png
deleted file mode 100644
index 201d7f2..0000000
Binary files a/public/images/custom-timeline-entries/example-entry.png and /dev/null differ
diff --git a/public/images/customer-cards-introduction.png b/public/images/customer-cards-introduction.png
new file mode 100644
index 0000000..1095986
Binary files /dev/null and b/public/images/customer-cards-introduction.png differ
diff --git a/public/images/customer-cards/customer-cards-introduction.png b/public/images/customer-cards/customer-cards-introduction.png
deleted file mode 100644
index 6ed7abd..0000000
Binary files a/public/images/customer-cards/customer-cards-introduction.png and /dev/null differ
diff --git a/public/images/email-setup/email-setup-0.png b/public/images/email-setup-0.png
similarity index 100%
rename from public/images/email-setup/email-setup-0.png
rename to public/images/email-setup-0.png
diff --git a/public/images/email-setup/email-setup-1.png b/public/images/email-setup-1.png
similarity index 100%
rename from public/images/email-setup/email-setup-1.png
rename to public/images/email-setup-1.png
diff --git a/public/images/email-setup/email-setup-2.png b/public/images/email-setup-2.png
similarity index 100%
rename from public/images/email-setup/email-setup-2.png
rename to public/images/email-setup-2.png
diff --git a/public/images/email-setup/email-setup-3.png b/public/images/email-setup-3.png
similarity index 100%
rename from public/images/email-setup/email-setup-3.png
rename to public/images/email-setup-3.png
diff --git a/public/images/email-setup/email-setup-4.png b/public/images/email-setup-4.png
similarity index 100%
rename from public/images/email-setup/email-setup-4.png
rename to public/images/email-setup-4.png
diff --git a/public/images/events-api-key-example.png b/public/images/events-api-key-example.png
new file mode 100644
index 0000000..05d2030
Binary files /dev/null and b/public/images/events-api-key-example.png differ
diff --git a/public/images/events-introduction.png b/public/images/events-introduction.png
new file mode 100644
index 0000000..a13df35
Binary files /dev/null and b/public/images/events-introduction.png differ
diff --git a/public/images/events/events-example.png b/public/images/events/events-example.png
deleted file mode 100644
index 2fe617b..0000000
Binary files a/public/images/events/events-example.png and /dev/null differ
diff --git a/public/images/events/events-introduction.png b/public/images/events/events-introduction.png
deleted file mode 100644
index bd75959..0000000
Binary files a/public/images/events/events-introduction.png and /dev/null differ
diff --git a/public/images/groups-introduction.png b/public/images/groups-introduction.png
new file mode 100644
index 0000000..c7ea7c9
Binary files /dev/null and b/public/images/groups-introduction.png differ
diff --git a/public/images/labels-introduction.png b/public/images/labels-introduction.png
new file mode 100644
index 0000000..75723a2
Binary files /dev/null and b/public/images/labels-introduction.png differ
diff --git a/public/images/labels/labels-introduction.png b/public/images/labels/labels-introduction.png
deleted file mode 100644
index d215910..0000000
Binary files a/public/images/labels/labels-introduction.png and /dev/null differ
diff --git a/public/images/linear-integration/linear-integration.png b/public/images/linear-integration/linear-integration.png
deleted file mode 100644
index 3335d53..0000000
Binary files a/public/images/linear-integration/linear-integration.png and /dev/null differ
diff --git a/public/images/linear-introduction.png b/public/images/linear-introduction.png
new file mode 100644
index 0000000..1955a9b
Binary files /dev/null and b/public/images/linear-introduction.png differ
diff --git a/public/images/notifications-introduction.png b/public/images/notifications-introduction.png
new file mode 100644
index 0000000..fac965f
Binary files /dev/null and b/public/images/notifications-introduction.png differ
diff --git a/public/images/priority-introduction.png b/public/images/priority-introduction.png
new file mode 100644
index 0000000..f8b4eb5
Binary files /dev/null and b/public/images/priority-introduction.png differ
diff --git a/public/images/quickstart.png b/public/images/quickstart.png
new file mode 100644
index 0000000..99fdf10
Binary files /dev/null and b/public/images/quickstart.png differ
diff --git a/public/images/reporting-introduction.png b/public/images/reporting-introduction.png
new file mode 100644
index 0000000..a6cf575
Binary files /dev/null and b/public/images/reporting-introduction.png differ
diff --git a/public/images/snippets-introduction.png b/public/images/snippets-introduction.png
new file mode 100644
index 0000000..fa8c7c5
Binary files /dev/null and b/public/images/snippets-introduction.png differ
diff --git a/public/images/social-image.png b/public/images/social-image.png
new file mode 100644
index 0000000..d337f12
Binary files /dev/null and b/public/images/social-image.png differ
diff --git a/public/images/syntax-highlighting-introduction.png b/public/images/syntax-highlighting-introduction.png
new file mode 100644
index 0000000..9fbce53
Binary files /dev/null and b/public/images/syntax-highlighting-introduction.png differ
diff --git a/public/images/ui-components/badge.png b/public/images/ui-component-badge.png
similarity index 100%
rename from public/images/ui-components/badge.png
rename to public/images/ui-component-badge.png
diff --git a/public/images/ui-components/container.png b/public/images/ui-component-container.png
similarity index 100%
rename from public/images/ui-components/container.png
rename to public/images/ui-component-container.png
diff --git a/public/images/ui-components/copy-button.png b/public/images/ui-component-copy-button.png
similarity index 100%
rename from public/images/ui-components/copy-button.png
rename to public/images/ui-component-copy-button.png
diff --git a/public/images/ui-components/divider.png b/public/images/ui-component-divider.png
similarity index 100%
rename from public/images/ui-components/divider.png
rename to public/images/ui-component-divider.png
diff --git a/public/images/ui-components/link-button-stripe.png b/public/images/ui-component-link-button-stripe.png
similarity index 100%
rename from public/images/ui-components/link-button-stripe.png
rename to public/images/ui-component-link-button-stripe.png
diff --git a/public/images/ui-components/link-button.png b/public/images/ui-component-link-button.png
similarity index 100%
rename from public/images/ui-components/link-button.png
rename to public/images/ui-component-link-button.png
diff --git a/public/images/ui-components/plain-text.png b/public/images/ui-component-plain-text.png
similarity index 100%
rename from public/images/ui-components/plain-text.png
rename to public/images/ui-component-plain-text.png
diff --git a/public/images/ui-components/row.png b/public/images/ui-component-row.png
similarity index 100%
rename from public/images/ui-components/row.png
rename to public/images/ui-component-row.png
diff --git a/public/images/ui-components/spacer.png b/public/images/ui-component-spacer.png
similarity index 100%
rename from public/images/ui-components/spacer.png
rename to public/images/ui-component-spacer.png
diff --git a/public/images/ui-components/text.png b/public/images/ui-component-text.png
similarity index 100%
rename from public/images/ui-components/text.png
rename to public/images/ui-component-text.png
diff --git a/quickstart.mdx b/quickstart.mdx
index 3791569..bd142bd 100644
--- a/quickstart.mdx
+++ b/quickstart.mdx
@@ -3,7 +3,7 @@ title: 'Quickstart'
description: 'Get started with Plain in 10 minutes.'
---
-TODO 2
+![Plain.com](/public/images/quickstart.png)
### Feedback & questions
diff --git a/reporting.mdx b/reporting.mdx
index 2be92e5..32a9258 100644
--- a/reporting.mdx
+++ b/reporting.mdx
@@ -2,4 +2,15 @@
title: 'Reporting'
---
-TODO
+![Reporting within Plain](/public/images/reporting-introduction.png)
+
+When viewing your threads queue you can at a glance see key metrics on your current support queue.
+
+You can see:
+
+- The breakdown of why a thread is in Todo (whether it's new threads, replies, Linear issues, etc.)
+- Distribution of threads by priority
+- A preview of how many threads will be unsnoozed in next 24 hours
+- Counts of assigned vs. unassigned threads
+- Breakdown of threads by customer group
+- Count of threads by label
diff --git a/shortcuts.mdx b/shortcuts.mdx
index 2cccdb1..a87d1bc 100644
--- a/shortcuts.mdx
+++ b/shortcuts.mdx
@@ -2,4 +2,39 @@
title: 'Shortcuts'
---
-TODO
+Keyboard shortcuts within Plain make it really fast to help customers and stay in the flow.
+
+This is the list of available keyboard shortcuts in Plain:
+
+#### Global shortcuts
+
+- **⌘** + **K** - Open the command palette
+- **?** - The full list of available shortcuts
+
+#### On thread queues
+
+- **F** - Add filter
+- **/** - Search for customers or threads
+
+#### When viewing a thread
+
+- **A** - Assign the thread
+- **P** - Change thread priority
+- **N** - Add a note to a thread
+- **E** - Mark a thread as done
+- **Z** - Snooze a thread
+- **!** - Mark customer as spam
+- **⌘ + .** - Show/hide queue
+- **⌘ + /** - Show/hide customer sidebar
+- **R** - Focus composer to reply
+- **J**/**K** - Next/Previous thread
+- **Esc** - Go back to queue
+- **L** - Add label
+- **I** - Add linear issue
+
+#### When the composer is focused
+
+- **⌘ + Enter** - Send message
+- **⌘ + Shift + Enter** - Send message and mark thread as done
+- **[** - Insert snippet
+- **Esc** - Unfocus/blur composer
diff --git a/snippets.mdx b/snippets.mdx
index 0d6e220..fc846df 100644
--- a/snippets.mdx
+++ b/snippets.mdx
@@ -2,4 +2,25 @@
title: 'Snippets'
---
-TODO
+![Snippets within Plain](/public/images/snippets-introduction.png)
+
+Snippets are templated messages in Plain that you can quickly combine to help customers more quickly.
+
+You can configure your snippets in **Settings** → **Snippets**.
+
+You can then press **[** to insert a snippet when writing in a thread.
+
+Snippets can either be entire messages or short re-usable bits.
+
+For example:
+
+- Common links such as to your docs, status page, calendar booking links etc.
+- Re-usable apologies and greetings such as "So sorry to hear about, let me look into that." or "Is there anything else I can help you with?"
+- Common instructions and how-to's to your product
+
+Within snippets you can also use some variables to include dynamic data. The following variables can be used:
+
+- `{{ customer.email }}`: The customer's email address.
+- `{{ customer.fullName }}`: The first and last name of the customer.
+- `{{ customer.shortName }}`: If set, the short/first name of the customer.
+- `{{ user.publicName }}`: Your public name (Useful for signatures)
diff --git a/syntax-highlighting.mdx b/syntax-highlighting.mdx
index 54a512d..a23aaa7 100644
--- a/syntax-highlighting.mdx
+++ b/syntax-highlighting.mdx
@@ -2,4 +2,26 @@
title: 'Syntax highlighting'
---
-TODO
+
+ ![Syntax highlighting within Plain](/public/images/syntax-highlighting-introduction.png)
+
+
+Within Plain you can quickly and easily share code with customers with complete syntax highlighting.
+
+In a message use 3 backticks ``` to start a code block and then press enter 3 times to exit the code block.
+
+The language will be automatically inferred but if you want to override this you can manually specify the syntax after the initial 3 back-ticks. For example:
+
+````
+```json
+{ "status": 200}
+```
+````
+
+will render:
+
+```json
+{ "status": 200 }
+```
+
+Syntax highlighting is currently only supported in email.