---
title: About chat applications
description: >-
  Learn about chat applications in checkout and the resources that developers
  can use to build them.
source_url:
  html: 'https://shopify.dev/docs/apps/build/checkout/chat'
  md: 'https://shopify.dev/docs/apps/build/checkout/chat.md'
api_name: checkout-ui-extensions
---

# About chat applications

**Note:**

The Chat component is limited to public, real-time chat apps for customer support. It's available for the Checkout and Thank you pages for Shopify Plus merchants, and for the Thank you page for other plans. Custom apps may not use chat extensions.

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.

***

## How it works

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

* Chat-specific [targets](#targets)
* The [Chat](#chat-ui-component) UI component
* [App Bridge script for checkout](#app-bridge-script-for-checkout)
* Access to the [Chat API scope](#access-scope)

***

## Targets

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

**Note:**

Only a single extension can be active within the chat targets at any given time.

Location of the [`purchase.checkout.chat.render`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets) target:

![Chat target on the checkout pages](https://shopify.dev/assets/assets/images/apps/checkout/chat/purchase.checkout.chat.render-DJQvGWlR.png)

Location of the [`purchase.thank-you.chat.render`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/targets) target:

![Chat target on the Thank you page](https://shopify.dev/assets/assets/images/apps/checkout/chat/purchase.thank-you.chat.render-C1Uyey46.png)

***

## Chat UI component

The [chat](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/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.

### Component 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:

### Component 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.

![Chat component states](https://shopify.dev/assets/assets/images/apps/checkout/chat/chat-ux-component-states-DvJnvTxC.png)

***

## App Bridge script for Checkout

The [App Bridge script for Checkout](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/chat#app%20bridge%20for%20checkout) 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](https://shopify.dev/docs/api/app-home) script that is used for embedded apps in the Shopify admin.

***

## Access 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**](https://partners.shopify.com/current/apps).
2. Click the name of your app.
3. Click **API access requests**.
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**.

Only public apps may use chat extensions. You'll receive a response within seven days after Shopify reviews your access request.

***

## Developer tools and resources

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

[Checkout UI extensions API reference\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview)

[Consult the API reference for checkout UI targets and their respective types.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/extension-targets-overview)

[Components for checkout UI extensions\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components)

[Learn about the components that are available in checkout UI extensions.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/components)

[Checkout extension configuration\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration)

[Learn about the properties that you can configure in your checkout UI extension.](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration)

[App Bridge script for checkout\
\
](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/chat#app%20bridge%20for%20checkout)

[Learn about the full App Bridge API for checkout.](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/overlays/chat#app%20bridge%20for%20checkout)

***