Shopify Facebook Chat button not showing in theme editor

Question

I am creating Facebook chat application in shopify and it is almost done,now I am facing one issue that is my Facebook chat button is showing in front end but it not displays in theme editor because it sets iframe , I have tried my self to solve that error by adding liquid code edit theme field.Here is my code sample that I have added in theme.

async function load Facebook Chat(shop) {
  try {
    const response = await fetch(`https://meetanshi.org/shopify/prachi/fbchat/display.php?shop=${shop}`);
    const data = await response.json();
    console.log(data);
    const $swap = data[0];
    const $pageid = data[1];
    const $color = data[2];
    const $logintext = data[3];
    const $logouttext = data[4];
    if ($swap === '1') {
      //document.body.insertAdjacentHTML('afterbegin', '<div id="fb-root"></div><div id="fb-customer-chat" class="fb-customer chat"></div>');
      const nodeList = document.querySelectorAll(".fb-customer chat");
      for (let i = 1; i < nodeList.length; i++) {
        nodeList[i].style.display = "none";
      }
      const chatbox = document.getElementById('fb-customer-chat');
      chatbox.setAttribute("page_id", $pageid);
      chatbox.setAttribute("theme_color", $color);
      chatbox.setAttribute("logged_in_greeting", $logintext);
      chatbox.setAttribute("logged_out_greeting", $logouttext);
      chatbox.setAttribute("attribution", "biz_inbox");

      window.fbAsyncInit = function () {
        FB.init({
          xfbml: true,
          version: 'v15.0'
        });
      };
      (function (d, s, id) {
        let js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s);
        js.id = id;
        js.src = 'https://connect.facebook.net/en_GB/sdk/xfbml.customerchat.js';
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

// Replace 'your-shop-url' with the actual shop URL you want to use
const shop = window.location.host;
load Facebook Chat(shop);
then inlock folder i create liquid file his name is app-ambaded.liquid here it's code
<div id="fb-root"></div><div id="fb-customer-chat" class="fb-customer chat"></div>
{% schema %}
{
  "name": "Facebook Chat",
  "target": "body",
  "javascript": "app-embaded.js",
  "settings": []
}
{% endschema %}

now my question is this script load add button in my store fronted here it's screen cast

https://prnt.sc/t0pOuocSoqWN

but not show in theme editor here it's screen cast

https://prnt.sc/zI37gdJZ1uIQ

how to fix this error

I search about but nothing get proper solution so please help me to solve this problem as soon as possible , I am waiting for response , thank you in advance :)