optimistic-gold•17mo ago

Prototype sized chatbot for live website

Is there an easy way to embed my chatbot into my website but instead of the small round call to action on the bottom of the page, I'd like the big version of it that you see when you send a prototype to test. Like the attached. Thanks.

14 Replies

W. Williams (SFT)•17mo ago

see the following video:

W. Williams (SFT)•17mo ago

https://www.youtube.com/watch?v=2gy-0HURFI0

Voiceflow

YouTube

How to embed your assistant within your website

This tutorial walks through how to embed your chatbot within a specific element on your website! This can be used to add it to the middle of the page or give your users a full page or larger webchat experience. You can find the documentation here https://developer.voiceflow.com/docs/chat-widget#supported-html-elements-in-the-text-step ** The ...

W. Williams (SFT)•17mo ago

Here is the script:

<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: 'YOUR-PROJECT-ID-HERE' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production',
          render: {
            mode: 'embedded',
            target: document.getElementById('voiceflow-chat'),
          },
          autostart: true
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

<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: 'YOUR-PROJECT-ID-HERE' },
          url: 'https://general-runtime.voiceflow.com',
          versionID: 'production',
          render: {
            mode: 'embedded',
            target: document.getElementById('voiceflow-chat'),
          },
          autostart: true
        });
      }
      v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);
  })(document, 'script');
</script>

Remember to enter your project ID. Add the following HTML where you want it to show up in your page:

<div id="voiceflow-chat"></div>

<div id="voiceflow-chat"></div>

optimistic-goldOP•17mo ago

thank you! @W. Williams (SFT) that works but it's still not completely as functional as the prototype view. For example, my chat sends a 2FA to authenticate the user. Using the prototype, on an iPhone, safari will offer to autofill the 2FA. When embedding, it doesn't. Any thoughts on that? Thanks Is there any reason I can't link to the prototype view pubically?

W. Williams (SFT)•17mo ago

the prototype link expires

optimistic-goldOP•17mo ago

the public prototype URL is just https://creator.voiceflow.com/prototype/{my project ID} do you know what the time to expiration is?

W. Williams (SFT)•17mo ago

it is listed on the pricing page. Very short.

optimistic-goldOP•17mo ago

https://www.voiceflow.com/pricing there's nothing about that here? Where do you see it?

W. Williams (SFT)•17mo ago

you are right, it has been removed @Daniel what is the time out on the proto link?

optimistic-goldOP•17mo ago

We only need this bot active for 2 months and it's for a closed group of customers, about 800 max

magic-amber•17mo ago

That prototype link is active as long as the project is available Theres no expiry rn - but you can add a password if you want

optimistic-goldOP•17mo ago

@Daniel Thanks. I'm just trying to determine if I can use the prototype link as my "live" version because of the way it renders to the end user

magic-amber•17mo ago

I would recommend using the embed mode winston shared above But you can use the sharable prototype mode if you want. Just note that the sharable prototype is always linked to the development version of your project. So if you change something on the canvas it instantly updates on that prototype

W. Williams (SFT)•17mo ago

@Daniel is that a change? I swear it use to time out.

Prototype sized chatbot for live website

Did you find this page helpful?