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:

  1. HTML page with those buttons:

  2. The described JS functions (and in this example some AjaxJS via jQuery)
  3. 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:

IssueSolutionCode
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