Anvil app iFrame (chatbot widget) wrapped in script for embedding

Anvil Q&A
1

What I’m trying to do:
I have created a chatbot app I want to embed into my website as a popup widget in an iFrame. I have written a script that shows/hides the iFrame (see code sample) with the click of a button. I want to embed this widget into my website but I don’t want to use this long script. The reason is that I will be using this script with other websites and want to maintain the iFrame sizing/styling etc. in one place.

I want to maintain this script somewhere central and generate an embed script that is much more concise (just a few lines that basically calls this “central” script).

What I’ve tried and what’s not working:
Don’t really know where to start with this one as I’m not a traditional web developer. I have seen some documentation about editing the standard HTML template but I don’t want to mess with what’s inside the iFrame.

From my research, it seems I have to create a javascript file and host it on a server somewhere. Is there some way I can do this within the Anvil editor?

Code Sample:

<html>
<head>
<style>
  /* CSS for the button and the chat bubble */
  #chatbubble {
    position: fixed;
    bottom: 70px;
    right: 20px;
    width: 400px;
    height: 500px;
    display: none;
    border: 1px solid #e4e4e7;
    border-radius: 6px;
    padding: 10px;
    box-shadow: inset 0 0 0 15px #fafafa;
    background-color: #fafafa;
    z-index: 1;
  }
  #openButton, #closeButton {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: #4285f4;
    border-radius: 50%;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
  }
  #closeButton {
    display: none;
  }
  /* Add some hover effects to the button */
  #openButton:hover, #closeButton:hover {
    transform: scale(1.1);
  }
</style>

<script defer>
  function toggleChat() {
    var chat = document.getElementById('chatbubble');
    var openButton = document.getElementById('openButton');
    var closeButton = document.getElementById('closeButton');
    if(chat.style.display === "none") {
      chat.style.display = "block";
      openButton.style.display = "none";
      closeButton.style.display = "flex";
    } else {
      chat.style.display = "none";
      openButton.style.display = "flex";
      closeButton.style.display = "none";
    }
  }
</script>
</head>

<body>
  <div id="openButton" onclick="toggleChat()">
  </div>
  <div id="closeButton" onclick="toggleChat()">
  </div>
  <iframe id="chatbubble" src="https://my.anvil.app"></iframe>

</body>
</html>
1 Like
2

Answering my own question:

I converted that code into a javascript function (thanks ChatGPT) and uploaded it to my Assets section. Then, I use this code to embed my widget into any site:

<script src="https://my.anvil.app/_/theme/chat_embed.js"></script>
  <script>
      createAnvilChat("https://my.anvil.app");
  </script>