-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add my fixes to docs * Update assignment.mdx * First pass * Customer cards * Others --------- Co-authored-by: preslavmihaylov <[email protected]> Co-authored-by: Mathias Vagni <[email protected]> Co-authored-by: Jordan Drake <[email protected]>
- Loading branch information
1 parent
4cb83e6
commit 54cd14c
Showing
16 changed files
with
105 additions
and
92 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,51 @@ | ||
--- | ||
title: 'Customer Cards' | ||
title: 'Customer cards' | ||
sidebarTitle: 'Overview' | ||
description: 'Live context straight from your own systems when helping customers.' | ||
--- | ||
|
||
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. | ||
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. | ||
|
||
## How it works | ||
Customer cards are configured on Plain (see how to [how to create one](/api-reference/customer-cards/create-a-customer-card)) and requested by Plain from your APIs. | ||
|
||
1. A customer is viewed in Plain. | ||
2. Plain fires a request to your backend with: | ||
## How they work | ||
|
||
- The customer's email and, if set, `externalId` | ||
- The configured Customer Card `key`s | ||
1. A thread is viewed in Plain. | ||
2. Plain fires a request to your API with: | ||
|
||
3. Your backend responds with the JSON for each card | ||
- The thread customer's email and, if set, `externalId` | ||
- The configured customer card `key`s | ||
|
||
3. Your API responds with the JSON for each card | ||
4. Cards are shown to the user in Plain. | ||
|
||
Based on your Customer Card settings, Plain will send a request to your API like the below example: | ||
Based on your customer card settings, Plain will send a request to your API like the below example: | ||
|
||
<Snippet file="customer-cards/customer-cards-basic-request.mdx" /> | ||
|
||
Your API should then reply with a list of cards matching the requested keys where each card contains the components you want to display: | ||
|
||
<Snippet file="customer-cards/customer-cards-basic-response.mdx" /> | ||
|
||
<Note> | ||
For a more detailed description of the protocol, check the | ||
[protocol](/api-reference/customer-cards/protocol) page. | ||
</Note> | ||
|
||
## UI Components | ||
|
||
To define what each customer card should look like, you use the Plain UI components. All the components are documented in the [Plain UI Components](/api-reference/ui-components/) section. | ||
|
||
You can find example Customer Cards and an example API you can check out [team-plain/example-customer-cards](https://github.com/team-plain/example-customer-cards). Feel free to try these out in your workspace! | ||
|
||
## Caching of cards | ||
|
||
Caching of Customer Cards is controlled via two properties: | ||
|
||
1. A time to live value (in seconds) in the Customer Card's settings. This can be changed under **Settings** → **Customer Cards**. Any changes will only apply to newly loaded Customer Cards. | ||
2. An explicit time to live value (in seconds) in your API response with the key `timeToLiveSeconds`. This overrides the value from settings and allows your API to dynamically set the TTL using custom logic. | ||
|
||
Any card that is past its expiry time will usually be deleted within a few minutes but no later than 48 hours after expiry. | ||
You can find example customer cards and an example API you can check out [team-plain/example-customer-cards](https://github.com/team-plain/example-customer-cards). Feel free to try these out in your workspace! | ||
|
||
## Example cards | ||
|
||
To demonstrate what you can build with Customer Cards we've built some examples you can view and which are open source. | ||
To demonstrate what you can build with customer cards we've built some examples you can view and which are open source. | ||
|
||
[**Customer Cards Examples →**](https://github.com/team-plain/example-customer-cards) | ||
[**Customer cards Examples →**](https://github.com/team-plain/example-customer-cards) | ||
|
||
## Playground | ||
|
||
The Customer Cards Playground lets you build and preview the component JSON needed to create a Customer Card. Use this to prototype a Customer Card before starting to build your integration. | ||
The customer cards playground lets you build and preview the component JSON needed to create a customer card. Use this to prototype a customer card before starting to build your integration. | ||
|
||
[**Customer Cards Playground →**](https://app.plain.com/developer/customer-cards-playground/) | ||
[**Customer cards playground →**](https://app.plain.com/developer/customer-cards-playground/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
--- | ||
title: 'Create a customer card' | ||
description: 'Define the details of the customer card.' | ||
--- | ||
|
||
To create a customer card head to **Settings** → **Customer cards** and enter the following details: | ||
|
||
- **Title**: this will be displayed as the title of the card so even if the card fails to load users know which card is | ||
errored. | ||
- **Key**: the link between this config and your API. A key can only contain alphanumeric, hyphen, and underscore characters (regex: `[a-zA-Z0-9_-]+`) | ||
- **Default time to live (seconds)**: by default how long Plain should cache customer cards. The minimum is 15 seconds, maximum is 1 year in seconds (31536000 seconds). | ||
- **URL**: the URL of your API endpoint that will be built to return customer cards. It must start with `https://`. | ||
- **Headers (optional)**: the headers Plain should pass along when making the request. While this is optional it is | ||
**highly reccommend** to add authorization headers or other tokens that authenticate the request as your API may be | ||
returning customer data. | ||
|
||
<Note> | ||
To get you started quickly, we've created a few example customer cards that you can configure and see how they look in your application. All example cards are available in our open-source repository: | ||
[team-plain/example-customer-cards](https://github.com/team-plain/example-customer-cards) | ||
|
||
Here is one you can try right now: | ||
|
||
- Title: e.g. "Usage" | ||
- Key: `usage` | ||
- Default time to live: `120` | ||
- URL: https://example-customer-cards.plain.com/ | ||
|
||
</Note> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.