---
title: UX guidelines for chat
description: Understand the UX guidelines for adding chat to checkout, and learn how to design the best experience for customers and merchants.
source_url:
  html: https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat
  md: https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat.md
---

ExpandOn this page

* [Build within the Chat component dimensions](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#build-within-the-chat-component-dimensions)
* [Avoid creating non-interactive areas](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#avoid-creating-non-interactive-areas)
* [Never distract the customer from checking out](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#never-distract-the-customer-from-checking-out)
* [Avoid using eye-catching colors for indicating a new message](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#avoid-using-eye-catching-colors-for-indicating-a-new-message)
* [Next steps](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#next-steps)

# UX guidelines for chat

Chat apps can improve the customer experience at checkout by providing a way to interact with store representatives. When you create a chat experience, adhere to these UX guidelines.

***

## Build within the Chat component dimensions

The Chat component integrates an iframe that can have the following states:

* **Minimized**: The state before customers interact with the Chat component.

* **Maximized**: The state after customers interact with the Chat component.

  For an optimized customer experience, size the iframe within the following dimensions:

* **Minimized:** Max `224px` width by `72px` height on desktop screen sizes.

* **Maximized:** Max `415px` width by `700px` height on desktop screen sizes. For mobile screen sizes, the size restriction changes to `100%` width and `93%` height of the viewport.

![Chat component dimensions](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/chat/chat-ux-dodonts-dimensions-CEgwqovA.png)

***

## Avoid creating non-interactive areas

For security reasons, the HTML `<iframe>` element that powers the Chat component does not let user interactions pass its boundaries. Since the Chat component overlays the checkout, it may cover checkout’s interactive elements like buttons and form fields. As a result, attempting to interact with these elements using a mouse while they are covered by the Chat frame will not work, leading to a confusing experience for customers.

To prevent this issue, we recommend resizing the Chat component to fit the full rendered user experience, whether it is the activating button or the maximized window.

Additionally, ensure that the maximized chat window always covers the activating button to prevent the creation of a large non-interactive area.

![Inactive area created by a larger window](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/chat/chat-ux-dodonts-non-interactive-area-CvKvNaeK.png)

***

## Never distract the customer from checking out

The only permissible message indicator during checkout is a number badge. This ensures that customers can complete their purchase without unnecessary distractions.

* **Active chat sessions only:** New message notifications are only triggered when the customer is engaged in an active chat session. This approach respects the customer’s attention and maintains a seamless checkout process.

* **Avoid distractions:** Refrain from using flashy animations or videos to draw attention to the chat widget.

![Distracting elements in the chat interface](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/chat/chat-ux-dodonts-distractions-CIjzdDP_.png)

***

## Avoid using eye-catching colors for indicating a new message

Badges are great for helping the customer realize they have a new message waiting for them. However, badges should only use toned down colors as an indicator to avoid distracting the customer from completing their purchase.

![Distracting colors in the chat interface](https://cdn.shopify.com/shopifycloud/shopify-dev/production/assets/assets/images/apps/checkout/chat/chat-ux-dodonts-colors-Mf12mZF9.png)

***

## Next steps

* For general best practices for all checkout UI extensions, refer to the [Checkout UX guidelines](https://shopify.dev/docs/apps/build/checkout/ux-for-checkout).

***

* [Build within the Chat component dimensions](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#build-within-the-chat-component-dimensions)
* [Avoid creating non-interactive areas](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#avoid-creating-non-interactive-areas)
* [Never distract the customer from checking out](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#never-distract-the-customer-from-checking-out)
* [Avoid using eye-catching colors for indicating a new message](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#avoid-using-eye-catching-colors-for-indicating-a-new-message)
* [Next steps](https://shopify.dev/docs/apps/build/checkout/chat/ux-for-chat#next-steps)