This is quite easy to do with a bit of JavaScript magic in combination with the three JS functions to achieve this:
So, for example, say you have a button with which you want to start the bot and another one to hide (or stop) the bot. All you need is to combine the following 3 elements:
HTML page with those buttons:
- The described JS functions (and in this example some AjaxJS via jQuery)
- The path of your bot, which is the final 2 parts of the URL in the embed code (example: https://quriobot.com/qb/widget/organizationID/bot_ID)
Example of starting a bot via a button:
<head> </script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> </head> <body> <script > $(function() { $("#go").click(function() { quriobot.start("NeBYgZbjAxE3l7jA/9nJaZmp92VrpvxPR") }) }) </script> <button id="go">Bot 1!</button> <script type="text/javascript" src="https://quriobot.com/qb/widget/NeBYgZbjAxE3l7jA/9nJaZmp92VrpvxPR"></script> </body>
please don't forget to add the jQuery part at the top
Example of 2 bots switching and hiding:
<head> </script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script> </head> <body> <script > $(function() { $("#go").click(function() {<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span> quriobot.start("NeBYgZbjAxE3l7jA/9nJaZmp92VrpvxPR") }) $("#back").click(function() { quriobot.start("NeBYgZbjAxE3l7jA/BNYyPbDGPxEe3lVQ") }) $("#hide").click(function() { quriobot.hide_frame() }) }) </script> <button id="go">Bot 1!</button> <button id="back">Bot 2!</button> <button id="hide">Hide!</button> <script type="text/javascript" src="https://quriobot.com/qb/widget/NeBYgZbjAxE3l7jA/9nJaZmp92VrpvxPR"></script> </body>
please don't forget to add the jQuery part at the top
How to solve some issues:
Issue | Solution | Code |
---|---|---|
Page jumps to top. After clicking to the button your page jumps to top. | 1) Please remove href="#" attribute from you button | |
2) Add e.preventDefault(); before quriobot.start() . So the full code of your snipper should be: | yourBtn.addEventListener('click', function(e){ e.preventDefault(); quriobot.start(); }) |
Enjoy!
Need more help or looking for inspiration? Join the Quriobot community!
Quriobot
Friendly & Fun
Interact & Convert