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.devtest.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 = '73574010-2f33-4b41-8b8a-09d18b025a56';
var BMB_MESSENGER_iid = '0cfb30f2-cfba-4161-9ae8-a25ec3ddf77d';
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 part of the code between the below comments with the 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.