Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update chat docs with new options and methods #151

Merged
merged 2 commits into from
Dec 9, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 11 additions & 1 deletion _snippets/chat/customization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ Plain.init({
// When specified, launcher will be hidden by default.
embedAt: '#embed',

// Optional. Hides the 'Powered by Plain' branding
hideBranding: false,

// Optional. The color scheme of the Chat, is either 'auto', 'light', or 'dark'
// 'auto' uses the user's browser preference to decide between light and dark mode (default: 'auto')
theme: 'light',
Expand All @@ -63,14 +66,21 @@ Plain.init({
alt: 'An example logo';
};

// Optional. Position of the chat widget when it is floating.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/position for more information - only bottom and right are supported
position: {
right: '10px',
bottom: '10px',
}

// Optional. Allows you to set fields for the threads which are created from chats
threadDetails: {
// See the data model documentation [asdasd](/chat/customization#all-threads) 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: [
// See the chat buttons documentation (https://localhost:3000/chat/customization#chat-buttons) for more information on these fields
// See the chat buttons documentation for more information on these fields
];
});
```
30 changes: 30 additions & 0 deletions _snippets/chat/methods.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```typescript
// This takes the same arguments as Plain.init. It will update the chat widget in-place with the new configuration.
// Only top-level fields are updated, nested fields are not merged.
Plain.update({ ... });

// This takes the same arguments as `customerDetails` in Plain.init.
// This will update just the customer details in the chat widget. This may be useful if you have asynchronous authentication state
Plain.setCustomerDetails({ ...})

// Opens and closes the widget if using the default, floating mode
Plain.open();
Plain.close();

// These are event listeners that will be fired when the chat widget is opened or closed respectively
// These return a function that can be called to remove the listener
Plain.onOpen(() =>{
// Opened
});
Plain.onClose(() => {
// Closed
});

// Returns whether or not the chat widget is initialized
Plain.isInitialized();

// This returns an array with debug logs that have been collected by the chat widget
// This is useful if you contacting Plain support with an issue regarding the chat widget
jordrake marked this conversation as resolved.
Show resolved Hide resolved
// This will redact sensitive information such as customer details
Plain.exportDebugLogs();
```
8 changes: 8 additions & 0 deletions chat/customization.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,11 @@ Similar to chat buttons, chat forms allow you to set fields on the thread when t
<Accordion title="Chat forms code">
<Snippet file="chat/chat-forms.mdx" />
</Accordion>

### Additional methods

We provide additional methods on the Plain object to provide more control over the chat widget. This may be helpful to keep the chat widget in-sync with your existing application state.

<Accordion title="Chat forms code">
<Snippet file="chat/methods.mdx" />
</Accordion>
Loading