deep-jade•2y ago

Need guidance on how to make the chatbot occupy the whole screen like in Chatgpt.

I am new to coding and I am using voice flow for my school project. Plz help me through this

8 Replies

deep-jadeOP•2y ago

@NiKo | Voiceflow I hope you can help sorry for the ping!

Check the #📚┃community-tutorials channel: https://discord.com/channels/1079548823610871889/1167198331433406604 Or #📚┃code-snippets https://discord.com/channels/1079548823610871889/1174397802718175292

deep-jadeOP•2y ago

Thanks a lot but sadly I am not really experienced in coding so I don't really understand what to do.... I have made a chatbot without any need of code thanks to voice flow but I don't know how to put it into a website I know I might be asking a lot for a stranger but can you suggest me a good websit or application which creates a website for you with no coding? and explain me how to make the chatbot cover the whole web page :p_Abegkitty: :bropray: i have to submite this project within 3 days and its worth 50 marks for my year @NiKo | Voiceflow you there?

NiKo | Voiceflow•2y ago

Paste the following code into a file and name that file index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Voiceflow Chat</title>
  <style>
    #voiceflow-chat {
      width: 100vw;
      height: 100vh;
      margin: 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
  </style>
</head>
<body>
<script type="text/javascript">
    (function (d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function () {
        window.voiceflow.chat.load({
          verify: { projectID: '65aa6270a36bb0b79c9bba16' },
          url: 'https://general-runtime.voiceflow.com/',
          versionID: 'development',
          assistant: {
            stylesheet: "https://link.voiceflow.fr/b53Sxx"
          }
        }).then(() => {
          setTimeout(() => {window.voiceflow.chat.open();}, 500)
              });
          };
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript";                  s.parentNode.insertBefore(v, s);
    })(document, 'script');
  </script>
<div id="voiceflow-chat"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Voiceflow Chat</title>
  <style>
    #voiceflow-chat {
      width: 100vw;
      height: 100vh;
      margin: 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1000;
    }
  </style>
</head>
<body>
<script type="text/javascript">
    (function (d, t) {
      var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
      v.onload = function () {
        window.voiceflow.chat.load({
          verify: { projectID: '65aa6270a36bb0b79c9bba16' },
          url: 'https://general-runtime.voiceflow.com/',
          versionID: 'development',
          assistant: {
            stylesheet: "https://link.voiceflow.fr/b53Sxx"
          }
        }).then(() => {
          setTimeout(() => {window.voiceflow.chat.open();}, 500)
              });
          };
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript";                  s.parentNode.insertBefore(v, s);
    })(document, 'script');
  </script>
<div id="voiceflow-chat"></div>
</body>
</html>

In the code, edit the line: verify: { projectID: '65aa6270a36bb0b79c9bba16' }, and replace with your project ID you can find in your agent settings in Voiceflow. Also, if you're using the production version of your agent (Publish button), change this: versionID: 'development', to this: versionID: 'production',

W. Williams (SFT)•2y ago

Just put this where you want the chat bot to be on your page and enter your Project-ID:

``
<iframe id="vfchatframe" style="width: 100%; height: 80vh;"></iframe>

<script>
    var iframe = document.getElementById('vfchatframe');
    var iframeDocument = iframe.contentWindow.document;

    var script = iframeDocument.createElement('script');
    script.innerHTML =

(function(d, t) { var v = d.createElement(t), s = d.getElementsByTagName(t)[0]; v.onload = function() { window.voiceflow.chat.load({ verify: { projectID: 'PROJECT-ID' }, url: 'https://general-runtime.voiceflow.com', versionID: 'development', assistant: { stylesheet: "data:text/css;base64,aHRtbCwgYm9keSB7CiAgICBtYXJnaW46IDA7CiAgICBwYWRkaW5nOiAwOwogICAgaGVpZ2h0OiAxMDAlOwogICAgd2lkdGg6IDEwMCU7CiAgICBvdmVyZmxvdzogaGlkZGVuOwp9CgoudmZyYy13aWRnZXQtLWNoYXQgewogICAgcG9zaXRpb246IGZpeGVkICFpbXBvcnRhbnQ7CiAgICB0b3A6IDAgIWltcG9ydGFudDsKICAgIGxlZnQ6IDAgIWltcG9ydGFudDsKICAgIHJpZ2h0OiAwICFpbXBvcnRhbnQ7CiAgICBib3R0b206IDAgIWltcG9ydGFudDsKICAgIHdpZHRoOiAxMDAlICFpbXBvcnRhbnQ7CiAgICBoZWlnaHQ6IDEwMCUgIWltcG9ydGFudDsKICAgIGJvcmRlcjogbm9uZSAhaW1wb3J0YW50OwogICAgbWF4LXdpZHRoOiBub25lICFpbXBvcnRhbnQ7CiAgICBtYXgtaGVpZ2h0OiBub25lICFpbXBvcnRhbnQ7Cn0KCi52ZnJjLW1lc3NhZ2UtLWNoYXQgewogICAgd2lkdGg6IDgwJSAhaW1wb3J0YW50Owp9" } }).then(() => { window.voiceflow.chat.hide() setTimeout(function () { window.voiceflow.chat.open(); window.voiceflow.chat.show() }, 500)}); } v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s); })(document, 'script');`; iframeDocument.body.appendChild(script); </script>

deep-jadeOP•2y ago

Yo I am building my website in weebly website builder And under the theme section it says we can edit the html code And when I tri d out both the codes the chatbot only appears in the bottom side of the screen And doesn't occopy the whole page. I would really, really appreciate any kind of help! :Cry:

rare-sapphire•2y ago

Hey @Aizen other than the messages send above we cant provide further help. Unfortunately if this is too complex you may need to look into a simpler tool like chatbase.

deep-jadeOP•2y ago

Okay 😦 but I just Wana know if the problem is from my end or the code isn't working

Need guidance on how to make the chatbot occupy the whole screen like in Chatgpt.

Did you find this page helpful?