About chat applications

A chat application allows customers to get real-time help during their shopping journey. For example, they may have questions about the items in their cart, the return policy or any other questions that will help them complete their purchase.

This guide introduces chat widgets in checkout and showcases the available resources that developers can use to build them for Shopify checkout.

Anchor to How it worksHow it works

The key pieces required to build chat widgets in checkout are:

• Chat-specific extension targets
• The Chat UI component
• App Bridge script for checkout
• Access to the Chat API scope

Anchor to Extension targetsExtension targets

In the checkout and thank you pages, there is a dedicated static extension target specifically for chat applications.

Location of the purchase.checkout.chat.render extension target:

Location of the purchase.thank-you.chat.render extension target:

Anchor to Chat UI componentChat UI component

The Chat component allows developers to embed their own hosted chat application. This UI component maps directly to an HTML <iframe> when it's rendered inside a checkout or thank you page. Within the embedded application, developers can render any elements and control their style. The shop's branding configured by the merchant does not automatically apply.

The component accepts a set of optional properties to specify its dimensions as well as exposing callbacks that allows a secure transfer of information between the host and the embedded application.

Anchor to Component behaviorComponent behavior

The Chat component is always positioned in the bottom right corner of the customer's screen.

• On desktop and large screen sizes, the Chat component is always visible.

• On mobile devices and smaller screen sizes, the Chat component is automatically hidden when it covers key areas of the checkout flow.

  Behavior on mobile when the component goes over the Order summary and Pay now button:

Anchor to Component statesComponent states

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, set the size of 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 App Bridge script for CheckoutApp Bridge script for Checkout

The App Bridge script for Checkout provides APIs that enable a secure communication channel between the Shopify Checkout and the embedded application within the Chat iframe. The script also offers convenient methods to perform common actions, like resizing the iframe from within the application. The script is similar to the App Bridge script that is used for embedded apps in the Shopify admin.

Anchor to Access scopeAccess scope

To build a chat application for the checkout and Thank you pages, your app needs to request the required protected access scopes:

1. From the Partner Dashboard, go to Apps.
2. Click the name of your app.
3. Click API access.
4. In the Access requests section, on the Access Chat in checkout extensions card, click Request access.
5. On the page that opens, describe why you're applying for access.
6. Click Request access.

You'll receive a response within seven days after your request was reviewed by Shopify.

Anchor to Developer tools and resourcesDeveloper tools and resources

Explore the following developer tools and resources to get familiar with building chat apps:

Checkout UI extensions API reference

Consult the API reference for checkout UI targets and their respective types.

Components for checkout UI extensions

Learn about the components that are available in checkout UI extensions.

Checkout extension configuration

Learn about the properties that you can configure in your checkout UI extension.

App Bridge script for checkout

Learn about the full App Bridge API for checkout.