> Note
> The Chat component is limited to real-time chat apps for customer support and it is available for the Checkout and Thank you pages for Shopify Plus merchants, and for the Thank you page for other plans.
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 [extension targets](#extension-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)
## Extension targets
In the checkout and thank you pages, there is a dedicated static extension 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`](/docs/api/checkout-ui-extensions/latest/targets/chat/purchase-checkout-chat-render) extension target:
Location of the [`purchase.thank-you.chat.render`](/docs/api/checkout-ui-extensions/latest/targets/chat/purchase-thank-you-chat-render) extension target:
## Chat UI component
The [`Chat`](/docs/api/checkout-ui-extensions/latest/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:
<video autoplay muted loop controls aria-label="The Chat component disappears when it goes over the Order summary and Pay now button.">
<source src="/assets/apps/checkout/chat/chat-ux-activator-behavior.webm" type="video/webm" />
</video>
### 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.
## App Bridge script for Checkout
The [App Bridge script for Checkout](/docs/api/checkout-ui-extensions/latest/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](/docs/api/app-bridge) 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**.
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 7 days after your request was reviewed by Shopify.
## Developer tools and resources
Explore the following developer tools and resources to get familiar with building chat apps:
<div class="resource-card-grid">
<div>
<a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/extension-targets-overview" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/build"
data-alt-src="/assets/resource-cards/build-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Checkout UI extensions API reference
</h3>
<p class="resource-card__description">Consult the API reference for checkout UI targets and their respective types.</p>
</a>
</div>
<div>
<a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/components" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/blocks"
data-alt-src="/assets/resource-cards/blocks-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Components for checkout UI extensions
</h3>
<p class="resource-card__description">Learn about the components that are available in checkout UI extensions.</p>
</a>
</div>
<div>
<a class="resource-card" href="/docs/api/checkout-ui-extensions/latest/configuration" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/gear"
data-alt-src="/assets/resource-cards/gear-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
Checkout extension configuration
</h3>
<p class="resource-card__description">Learn about the properties that you can configure in your checkout UI extension.</p>
</a>
</div>
<div>
<a class="resource-card" href="/docs/api/checkout-ui-extensions/unstable/components/overlays/chat#app%20bridge%20for%20checkout" data-theme-mode="">
<div class="resource-card__indicator-container"><img
src="/assets/resource-cards/gear"
data-alt-src="/assets/resource-cards/gear-dark"
aria-hidden="true"
class="resource-card__icon themed-image"></div>
<h3 class="resource-card__title">
App Bridge script for checkout
</h3>
<p class="resource-card__description">Learn about the full App Bridge API for checkout.</p>
</a>
</div>
</div>