To install your MOPO AI Agent on your website, simply add the following line of JavaScript code to the header of each page where you want the agent to appear:
<script
id="mopo_agent_embed_script"
type="text/javascript"
async
src="https://agent.mopo.life/chat_assets/embed.js?url=https://yourwebsite.com"
crossorigin
></script>
Show Installed Agent on Host Website
If disabled, your AI agent will not appear on your website.
WordPress Installation
If your website is built on WordPress, follow these steps to add the MOPO AI Agent:
- Install and activate the “WPCode Lite” plugin.
- Navigate to the “Header & Footer” section within the plugin.
- Add the provided JavaScript code to the header section.
WebFlow Installation
- From the Webflow dashboard locate your project thumbnail and click on the three dotted icon to view options.
- Click on Settings.
- From the left sidebar, navigate to the Custom code section.
- This page will contain different sections for head, body, and footer. It is recommended to add the JavaScript code in the body section.
- Scroll down to find the section that says Add code before </body> tag and enter your code. Make sure you wrap your code inside the <script> and </script> tags. Do not include the <body> and </body> tags, your code is automatically placed inside them.
- Validate and save your changes. Note that all code applied here will be applied to all pages of your project.
- To apply JavaScript to a specific page, from inside the editor, go to the Pages tab in the left sidebar menu.
- Hover over the page name to reveal a small gear icon for settings. Click to open.
- Scroll to the bottom to find the Custom Code section. Click to expand. Note that it is recommended to add scripts before the </body> tag, for which you may scroll down to the Before the </body> tag section.
- Embed your JavaScript code inside this section for best performance. Make sure you wrap your code inside the <script> and </script> tags. Do not include the <body> and </body> tags, your code is automatically placed inside them.
- Save your changes and publish your project to see them live.
Google Tag Manager Installation
- From the Google tag Manager Dashboard, choose the container that you want to install the agent on.
- Choose to Create a New Tag
- In the pop-out with an Untitled Tag, choose to create a “Custom HTML Tag”
- Copy the installation code of the agent from the config on the agent: Config > Installation > Copy the code snippet and add to it the following code snippet:
<style>
div:has(> script#agent_embed_script) {
display: block !important;
visibility: visible !important;
}
</style>
- For your Trigger, choose to fire on "All pages" unless you’d like to do something else specific to Tags and Data Layers you've created within GTM.
- After saving the tag, you're not quite done. Remember to Submit your changes permanently (and preview them first if you would like).
- After you Submit your changes, you can describe your Version and hit Publish
Joomla! Installation
First we need to install the Regular Labs - ReReplacer Plugin. Follow these step-by-step instructions to do it:
- Log into your Joomla administrator.
- In the menu choose: System >> Install >> Extensions.
- Choose the tab: Install from Web (or enable it if you haven't done so yet).
- Select the search field and enter ReReplacer and press on enter.
- Click on the ReReplacer listing.
- Click on Install.
- Click on Install again to confirm.
Now that the ReReplacer plugin is installed, these are the instructions to install the Agent using this plugin:
- From the left navbar menu, in the Components, click on the Regular Labs - ReReplacer component.
- Click on + New .
- In the search text box, input
</body>
.
- In the Replace text box, put the agent installation code
<script
id="mopo_agent_embed_script"
type="text/javascript"
async
src="https://agent.mopo.life/chat_assets/embed.js?url=https://yourwebsite.com"
crossorigin
></script>
</body>
- In the Search Areas, Enable in area dropdown, choose Everywhere.
- Save and enable the new added component.
Integrations
Your MOPO AI Agent can seamlessly integrate with a variety of tools and platforms to enhance its functionality and streamline your workflows. Whether you’re looking to directly send data to your sales or support teams, or automate complex processes via Zapier, the following integration options ensure your agent works harmoniously with your existing systems.
Navigate to the Integrations section for a detailed guide on using Integrations.