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.

Anchor to Build within the Chat component dimensionsBuild 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.

Anchor to Avoid creating non-interactive areasAvoid 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.

Anchor to Never distract the customer from checking outNever 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.

Anchor to Avoid using eye-catching colors for indicating a new messageAvoid 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.

Anchor to Next stepsNext steps

• For general best practices for all checkout UI extensions, refer to the Checkout UX guidelines.