Extension with Chat API not working

Extensions
1

Hi, I built a checkoutUI extension for Chat Api and implemented the example in docs with target checkout
Chat API Docs
I’ve hosted the example in app which is publicly accessible and here is extension settings I did
[[extensions.targeting]]
target = “purchase.checkout.chat.render”

[extensions.targeting.preloads]
chat = “https://my-chat-application.com”
And here is my Checkout extension code

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} />
}

Although the extension worked and the host script is embedded in the Chat Component Iframe, it’s not showing up on the checkout page.
Here is the screenshot of it.
Which step I’ve missed or is it an issue of Chat API as it’s very new?

checkout_exntensio_iframe
checkout_exntensio_iframe1920×907 186 KB

2

Hi Qammar,

Just to confirm, did you request Access Chat in checkout extension, as is described here: About chat applications

3

Hi @Liam-Shopify Yes I do have access check this

image
image1836×444 32.4 KB

4

DMing you to dig into this further.

5

Hi again Qammar,

Our product team has investigated this based on the info you’ve shared, and it looks like the iframe element renders a button but it’s outside of the visible zone. This doc explains how the iframe is rendered - you should absolutely position the chat button in the bottom-right corner.

6
  1. Use custom properties in JavaScript or the CSS in App Bridge hosted application to set protections against overflowing content.
  1. Resizing the Chat component to fit the full rendered user experience

Resize the Chat iframe from the hosted application

<!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);

          // if the dialog is not visible,
          // - resize the iframe to the desired dialog's size
          // - then show the dialog
        } else {
          shopify !== undefined && window.resizeTo(415, 700);
          dialog.classList.add('visible');
        }
      }
    </script>
  </body>
</html>