How to Add an Aiomatic Remote Chatbot as a Popup
This guide explains how to integrate the Aiomatic remote chatbot as a floating popup on your website.
Step 1: Copy and Paste the Code
Add the following code to your website where you want the chatbot popup to appear:
<style>
.floating-iframe-container {
padding-top: 15px;
position: fixed; /* Makes it float on top */
bottom: 20px; /* Adjust the vertical position */
right: 20px; /* Adjust the horizontal position */
width: 600px; /* Matches iframe width */
height: 500px; /* Matches iframe height */
z-index: 1000; /* Ensures it's above other elements */
border: 1px solid #ccc; /* Optional styling */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
background: white; /* Background for better visibility */
display: none; /* Initially hidden */
}
.close-button {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 16px;
background: #f44336;
color: white;
border: none;
border-radius: 3px;
padding: 5px 10px;
}
.open-button {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
background: #008cba;
color: white;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow */
}
</style>
<button class="open-button" onclick="openIframe()">Open Chat</button>
<div class="floating-iframe-container">
<button class="close-button" onclick="closeIframe()">Close</button>
<iframe src="https://localhost/wp/?aiomatic_remote_chat=chatbot-677e485d0d496"
width="100%" height="100%" frameborder="0" scrolling="no">
Your browser does not support iframes.
</iframe>
</div>
<script>
function closeIframe() {
const iframeContainer = document.querySelector('.floating-iframe-container');
iframeContainer.style.display = 'none';
const openButton = document.querySelector('.open-button');
openButton.style.display = 'block';
}
function openIframe() {
const iframeContainer = document.querySelector('.floating-iframe-container');
iframeContainer.style.display = 'block';
const openButton = document.querySelector('.open-button');
openButton.style.display = 'none';
}
</script>Step 2: Replace the Iframe URL
Important: Replace the URL in the <iframe> tag (http://localhost/wp/?aiomatic_remote_chat=chatbot-677e485d0d496) with the URL provided by the Aiomatic plugin. You can find this URL in the “Remote Chatbot” tab under the “AI Chatbot” menu in Aiomatic.
Step 3: Test the Chatbot
Save your changes and load your website to ensure the chatbot popup is working as expected. You should see a button labeled “Open Chat.” Clicking it will display the chatbot popup, and clicking “Close” will hide it again.
Customization Options
You can adjust the appearance and functionality by modifying the CSS or JavaScript in the provided code:
- Change the width and height of the chatbot popup by editing the
widthandheightproperties in the CSS. - Adjust the position of the popup by modifying the
bottomandrightproperties. - Style the “Open Chat” and “Close” buttons by editing their respective CSS classes.
