diff --git a/packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-iframe-clipping.png b/packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-iframe-clipping.png
new file mode 100644
index 0000000000..c01bdffb83
Binary files /dev/null and b/packages/ui-extensions/docs/surfaces/checkout/screenshots/chat-component-iframe-clipping.png differ
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/AppBridge.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/AppBridge.ts
index 5eed165016..b65755546e 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/AppBridge.ts
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/AppBridge.ts
@@ -20,7 +20,7 @@ interface AppBridge {
/**
* The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C)
- * with a TTL of 5 minutes. It can be used can be used to ensure that requests came from a Shopify authenticated user.
+ * with a TTL of 5 minutes. It can be used to ensure that requests came from a Shopify authenticated user.
* See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) from more information.
*
* @see https://shopify.dev/docs/api/checkout-ui-extensions/latest/apis/session-token
@@ -85,8 +85,8 @@ interface Extension {
interface Visitor {
/**
- * The unique token of a given user across all surfaces in a shop, present
- * if a user has opted-in to tracking.
+ * The unique token of a given user across all surfaces in a shop,
+ * present if processing permission is provided.
*
* @ignore this maps to the _shopify_y cookie which Trekkie refers to as a
* uniqToken.
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.doc.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.doc.ts
index 7cfd7d8788..af19d63a4b 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.doc.ts
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.doc.ts
@@ -23,7 +23,7 @@ Use the Chat component to create real-time chat applications.
description: `
The App Bridge script for checkout provides APIs that enables a secure communication channel between the Shopify checkout and the embedded application within the Chat iframe. It also offers convenient methods to perform common actions like resizing the iframe from within the application.
-After App Bridge is set up in your app, you have access to the \`shopify\` global variable. This variable exposes the following App Bridge functionalities and configuration information:
+After App Bridge is [set up](#about-app-bridge) in your app, you have access to the \`shopify\` global variable. This variable exposes the following App Bridge functionalities and configuration information:
`,
type: 'AppBridge',
},
@@ -57,7 +57,7 @@ After App Bridge is set up in your app, you have access to the \`shopify\` globa
The \`src\` of the iframe rendered by Chat is provided by the \`preloads\` \`chat\` key in the extension configuration file. Shopify automatically appends query parameters to the URL which allows developers to verify the authenticity of the request and the identity of the merchant. We guarantee these tokens are valid and signed by Shopify.
#### id_token
-The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C) with a TTL of 5 minutes. It can be used can be used to retrieve merchants information on the backend as well as ensure that requests came from a Shopify authenticated source. See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) for more information.
+The ID token providing a set of claims as a signed [JSON Web Token (JWT)](https://openid.net/specs/openid-connect-core-1_0.html#IDToken%5C) with a TTL of 5 minutes. It can be used to retrieve merchants information on the backend as well as ensure that requests came from a Shopify authenticated source. See the [ID Token documentation](https://shopify.dev/docs/apps/build/authentication-authorization/session-tokens) for more information.
#### locale
The locale of the shop that’s embedding the app, i.e. \`en-CA\`. This information is also available in the \`shopify\` global variable under \`config\`.
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts
index 1919a155bb..0ec0fce420 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/Chat.ts
@@ -6,7 +6,7 @@ export interface ChatProps extends IdProps {
/**
* Adjust the inline size.
*
- * Checkout imposes sizing restrictions for the component, therefore the size set
+ * Checkout imposes [sizing restrictions](https://shopify.dev/docs/apps/build/checkout/chat#component-states) for the component, therefore the size set
* may not be the actual size rendered.
*
* `number`: size in pixels.
@@ -18,7 +18,7 @@ export interface ChatProps extends IdProps {
/**
* Adjust the block size.
*
- * Checkout imposes sizing restrictions for the component, therefore the size set
+ * Checkout imposes [sizing restrictions](https://shopify.dev/docs/apps/build/checkout/chat#component-states) for the component, therefore the size set
* may not be the actual size rendered.
*
* `number`: size in pixels.
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js
index e3fd44d88f..d4330692b7 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-communication.example.js
@@ -8,8 +8,11 @@ shopify.extension.port.onMessage = async (event) => {
if (event.data.action === 'ping') {
buyerFirstName = event.data.buyer.firstName;
- await shopify.extension.messagePort.postMessage({
+ await shopify.extension.port.postMessage({
action: 'pong',
});
}
};
+
+// Ensure the messagePort is ready to start sending and receiving messages.
+shopify.extension.port.start();
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-resize.example.html b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-resize.example.html
index 5278fb830d..34b5cfe1de 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-resize.example.html
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/app-bridge-resize.example.html
@@ -33,13 +33,13 @@
// - resize the iframe to the button's size
if (dialog.classList.contains('visible')) {
dialog.classList.remove('visible');
- shopify !== undefined && window.shopify.resizeTo(150, 50);
+ shopify !== undefined && window.resizeTo(150, 50);
// if the dialog is not visible,
// - resize the iframe to the desired dialog's size
// - then show the dialog
} else {
- shopify !== undefined && window.shopify.resizeTo(415, 700);
+ shopify !== undefined && window.resizeTo(415, 700);
dialog.classList.add('visible');
}
}
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-custom-properties-css.example.css b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-custom-properties-css.example.css
index dfde429f27..20e873a61c 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-custom-properties-css.example.css
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-custom-properties-css.example.css
@@ -4,8 +4,6 @@
}
.dialog {
- inline-size: min(
- 100%,
- var(--shopify-checkout-chat-maximized-max-inline-size)
- );
+ inline-size: 100%;
+ max-inline-size: var(--shopify-checkout-chat-maximized-max-inline-size);
}
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-media-query.example.css b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-media-query.example.css
deleted file mode 100644
index f9bca2d39f..0000000000
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/chat-media-query.example.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.dialog {
- border-radius: 1em;
- inline-size: 200px;
-
- @media screen and (max-width: 569px) {
- border-radius: 0;
- inline-size: 100%;
- }
-}
diff --git a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/include-app-bridge.example.html b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/include-app-bridge.example.html
index b8429429ff..ca6f00eb3b 100644
--- a/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/include-app-bridge.example.html
+++ b/packages/ui-extensions/src/surfaces/checkout/components/Chat/examples/include-app-bridge.example.html
@@ -1,3 +1,3 @@
-
+