This is particularly useful if you do not want the AI Chatbot Web Widget Avatar to appear all the time. Instead, you can add a button in your website or mobile app and open the Myma.ai Chatbot Web Widget with a click of that button.
Below is the sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- This is start of the Myma.ai Web Widget code -->
<script>
function openMessenger() {
if (!document.getElementById('messengeriframe')) {
var head = document.getElementsByTagName('head')[0];
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.textContent = `
<!-- Copy the below lines from your Myma.ai Web Widget Channel code -->
var BMB_MESSENGER_domain = 'https://messenger.myma.ai/';
var BMB_messengerHTMLPath = BMB_MESSENGER_domain + 'index.html';
var BMB_MESSENGER_head = document.getElementsByTagName('head')[0];
var BMB_MESSENGER_script = document.createElement('script');
BMB_MESSENGER_script.type = 'text/javascript';
BMB_MESSENGER_script.src = BMB_MESSENGER_domain + 'msgplugin.js';
BMB_MESSENGER_head.appendChild(BMB_MESSENGER_script);
var BMB_MESSENGER_gid = '478cd87e-567d-4330-96f8-538a5e68e682';
var BMB_MESSENGER_iid = 'a0ae8853-7fb3-4813-a0dc-898f2cfea575';
var BMB_MESSENGER_pid = '';
var BMB_MESSENGER_buttonscript = true;
<!-- Copy the above lines from your Myma.ai Web Widget Channel code -->
`;
head.appendChild(scriptTag);
} else {
document.getElementById("messengeriframe").contentWindow.postMessage("msgwindowOpened", "*");
}
}
</script>
<!-- This is end of the Myma.ai Web Widget code -->
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<button class="chat-btn-container" onclick="openMessenger()">Chat</button>
</body>
</html>
In the code above replace the GID and IID between the below comments with the codes from your script available in Settings -> Channel section of Myma.ai Dashboard.
<!-- Copy the below lines from your Myma.ai Web Widget Channel code -->
Copy your Web Widget channel code here
<!-- Copy the above lines from your Myma.ai Web Widget Channel code -->
Inside <body> is an example only to demonstrate the functionality. You will need to replace this with your code.
How to pass the initial message to the Chat Widget
You can pass the first message to the AI Chatbot by passing the following parameter as part of the script. This is particularly useful if you are adding a button or text somewhere in your website. Example: Clicking on Ask me about dining options, can open the Chatbot and send a message Dining Options on users behalf.
var BMB_MESSENGER_InputMsg='${text}';