This article will tell you how to integrate Meo into your own website. This means, that whenever you send a request to a client, then the client will click a link in the request email that leads the client to the Meo integration on your domain.
Note that we strongly recommend using a subdomain to place the integration. The guide is aimed at developers, web designers or people in charge of your website. Some basic knowledge of HTML is required. Once set up, please contact Meo at care@meo.io so we can verify the setup and activate it on your account.
How to integrate
We have built a dynamic JavaScript loader script that will automatically loads the cockpit into your website.
Step 1: Add JavaScript loader script inside <head> tag
Paste the following JavaScript inside the <head> tag of your webpage (this includes a required meta tag in the header to allow iframe to be correctly displayed. Please visit for more information on why this is necessary: https://www.w3schools.com/css/css_rwd_viewport.asp
<!-- Meo Cockpit Loader JS -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script>!function(e,t,o,s){e.Meo=s,e[s]=e[s]||function(){(e[s].q=e[s].q||[]).push(arguments)},e[s].l=1*new Date;let r=t.createElement("script"),a=t.getElementsByTagName("script")[0];r.async=1,r.src=o,a.parentNode.insertBefore(r,a)}(window,document,"https://app.meo.io/process/static/loader/v2.js","meoLoader"),meoLoader("create","meoWidget",{grantProcessId:"PROCESSID",languageCode:"en-US",customerId:"CUSTOMER_ID"});</script>In the above script, you need to change two values:
- PROCESS_ID - This should be replaced with the id of the default process that the loader should use. This is a UUID value.
- CUSTOMER_ID - This should be replaced by your Customer ID. This is a UUID value. You can optionally also set the default 'languageCode' to a supported language in the ISO format, e.g. 'en-US' and 'da-DK'.
Step 2: Add <div> tag inside <body> tag
Paste the following <div> tag inside the <body> tag of your webpage, at the location where you want the cockpit to appear. The width and height values can be overridden here.
<div id="meo-process-app-container" style="width: 100vw; height: 100vh"></div>Step 3: Verify integration
You can now verify that your integration works by loading the webpage that you have integrated the cockpit on.