Hi, I have already completed the four points below, but the chat still does not appear on the checkout page.
- Chat-specific extension targets
- The Chat UI component
- App Bridge script for checkout
- Access to the Chat API scope
I added the following in shopify.extension.toml
[[extensions.targeting]]
module = "./src/Checkout.tsx"
target = "purchase.checkout.chat.render"
[extensions.targeting.preloads]
chat = "https://xxxx-xx-xxx-xxx-xx.ngrok-free.app/"
Here is the Checkout.tsx:
import { reactExtension, Chat } from '@shopify/ui-extensions-react/checkout';
export default reactExtension('purchase.checkout.chat.render', () => (
<Extension />
));
function Extension() {
return <Chat inlineSize={150} blockSize={50} />;
}
Here is the HTML that is running on localhost and using ngrok to expose HTML to the public:
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.shopify.com/shopifycloud/checkout-web/assets/app-bridge-checkout.js"></script>
<style>
.dialog {
display: none;
}
.visible {
display: block;
}
</style>
</head>
<body>
<dialog class="dialog">
How can we help you today?
<button class="btn-close">Close</button>
</dialog>
<button class="btn-activator">Chat with us</button>
<script type="text/javascript">
const btnActivator = document.querySelector('.btn-activator');
const btnClose = document.querySelector('.btn-close');
const dialog = document.querySelector('.dialog');
// Bind actions to the buttons
btnActivator.addEventListener('click', toggleDialog);
btnClose.addEventListener('click', toggleDialog);
function toggleDialog() {
// If the dialog is visible,
// - hide the dialog
// - resize the iframe to the button's size
if (dialog.classList.contains('visible')) {
dialog.classList.remove('visible');
shopify !== undefined && window.resizeTo(150, 50);
} else {
// If the dialog is not visible,
// - resize the iframe to the desired dialog's size
// - then show the dialog
shopify !== undefined && window.resizeTo(415, 700);
dialog.classList.add('visible');
}
}
</script>
</body>
</html>
