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

thick-teal · 2024-01-19T18:37:38.453Z

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

T

thick-tealOP•1/19/24, 6:39 PM

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

N

NiKo | Voiceflow•1/19/24, 6:44 PM

Check the #

┃community-tutorials channel:
https://discord.com/channels/1079548823610871889/1167198331433406604

Or #

┃code-snippets
https://discord.com/channels/1079548823610871889/1174397802718175292

T

thick-tealOP•1/19/24, 8:47 PM

Thanks a lot but sadly I am not really experienced in coding so I don't really understand what to do....

T

thick-tealOP•1/19/24, 8:47 PM

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

T

thick-tealOP•1/19/24, 8:49 PM

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?

T

thick-tealOP•1/19/24, 8:51 PM

and explain me how to make the chatbot cover the whole web page

T

thick-tealOP•1/19/24, 8:52 PM

:p_Abegkitty:

T

thick-tealOP•1/19/24, 8:53 PM

:bropray:

T

thick-tealOP•1/19/24, 8:55 PM

i have to submite this project within 3 days and its worth 50 marks for my year

T

thick-tealOP•1/20/24, 7:09 AM

@NiKo | Voiceflow you there?

N

NiKo | Voiceflow•1/20/24, 11:45 AM

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>

<!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' },

verify: { projectID: '65aa6270a36bb0b79c9bba16' },

verify: { projectID: '65aa6270a36bb0b79c9bba16' },

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',

versionID: 'development',

versionID: 'development',

versionID: 'development',

to this:

versionID: 'production',

versionID: 'production',

versionID: 'production',

versionID: 'production',

W

W. Williams (SFT)•1/20/24, 7:44 PM

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 =

``
<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 =

``
<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 =

``
<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>

T

thick-tealOP•1/23/24, 7:56 PM

Yo I am building my website in weebly website builder

T

thick-tealOP•1/23/24, 7:57 PM

And under the theme section it says we can edit the html code

T

thick-tealOP•1/23/24, 7:57 PM

And when I tri d out both the codes the chatbot only appears in the bottom side of the screen

T

thick-tealOP•1/23/24, 7:58 PM

And doesn't occopy the whole page.

T

thick-tealOP•1/23/24, 7:58 PM

I would really, really appreciate any kind of help! :Cry:

P

popular-magenta•1/23/24, 10:55 PM

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.

T

thick-tealOP•1/24/24, 11:01 AM

Okay

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