How can I start/stop or switch bots via my own website buttons?

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 describedJS functions (and in this example some AjaxJS via jQuery)

  3. Your bot Embed code.

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>
   <YOUR BOT EMBED CODE>
</head>

<body>
    <script >
    $(function() {
        $("#go").click(function() {
           quriobot.start("NeBYgZbjAxE3l7jA/9nJaZmp92VrpvxPR")
        })
    })
    </script>

    <button id="go">Bot 1!</button>
</body>

please don’t forget to add the jQuery part at the top

Example of 2 bots switching and hiding:

<head>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
   <YOUR BOT EMBED CODE>
</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>
</body>

please don’t forget to add the jQuery part at the top

How to solve some issues:

IssueSolutionCode
Page jumps to the top.
After clicking on the button your page jumps to the 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:<br>yourBtn.addEventListener('click', function(e){<br> e.preventDefault();<br> quriobot.start();<br>})<br>

Enjoy!

Edit this page

Tags
See also