Button positioning for Conversations UI kit

[tonge495]

Hi Paste team,

We are working on adding a button to the live chat experience on Twilio Help Center in order to allow customers to end the conversation with the support agent. As we are using the Conversational UI kit for this experience, we were wondering if there are any guidelines around where the button should be positioned?

Here is the example of the mockup example:

[dosubot[bot]]

Hey there, @tonge495! 👋 Good to see you back. I'm diving into your question about button positioning for the Conversations UI kit and will have a detailed response for you shortly.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Can we pair help text with a button? (updated: 01/26/2023, similarity score: 87%)
• Using Paste for customer-facing demo app (updated: 08/11/2023, similarity score: 87%)
• Unhold icon - Answer (updated: 06/07/2023, similarity score: 85%)

[dosubot]

For positioning an "end conversation" button within the Conversations UI kit, consider the following guidelines:

1. Positioning and Placement: Ideally, place the button at the top right corner of the chat interface. This location is accessible yet unobtrusive, ensuring the button does not interfere with the chat interaction.

2. Accessibility and Visibility: Use an icon that clearly represents the "end conversation" action, accompanied by a descriptive title for accessibility. This helps users easily identify the button's purpose.

3. Functionality: Ensure the button performs the expected action efficiently, such as ending the conversation, possibly asking for feedback, and performing any necessary cleanup in the chat application.

4. Integration with Chat Functionality: The button should work seamlessly with the chat's core functions, enhancing the user experience without causing distractions.

These guidelines are derived from best practices within the Paste design system, specifically tailored for a web-based live chat UI. Implementing these suggestions should help create a functional and intuitive chat experience for users.

Details

Sources

• packages/paste-core/components/chat-composer/stories/ConversationsUIKit/helpers.tsx
• packages/paste-website/src/component-examples/ChatLogExamples.ts
• packages/paste-core/components/chat-log/src/ChatBookend.tsx
• packages/paste-core/components/chat-log/stories/components/UseChatLogger.stories.tsx
• packages/paste-website/src/pages/components/button/index.mdx
• packages/paste-website/src/components/customization-landing-page/WhyPaste.tsx
• packages/paste-website/src/pages/foundations/localization/index.mdx
• packages/paste-core/components/button/src/styles.ts
• packages/paste-website/src/pages/patterns/confirmation/index.mdx

About Dosu
This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

To continue the conversation, mention @dosu.