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.