I'd like to open the Overlay embed directly, how do I do this?

When you create an Overlay embed we give you two bits of code to add to your page. The first is the master code which you should place just before the closing </body> tag. The second is the inline code which generates the button users click to open the overlay - this goes inside the <body> </body> tags where you want the button to appear. When the user clicks the button the Overlay embed will appear in a modal (pop-up) over your page.

The inline code we give you will look like this
<span data-mapi-embed="EMBED_ID"></span>

Sometimes you might want to call the overlay but not use our button. You might want to call it from text or use your own button/graphic or you might want to call it in the background when a user does something else on your page.

You can do this by calling mapi in Javascript.

The mapi has four methods - open, close, trigger and toggle. Open, close and toggle all return promises (i.e. a function that resolves when the animation is complete or a rejects if something went wrong, e.g. no embed found for the param passed). Trigger is more "fire and forget" - it will call the open function if everything goes well, otherwise it silently fails.

Here is an example using an href link that uses the trigger method to open the Overlay: <a href="javascript:mapi.trigger('INSERT_EMBED_ID_HERE');">Click me</a>

Note that you must have our master embed code on your page for the above to work and you need to replace INSERT_EMBED_ID_HERE with your embed ID.

The above may also be useful for customers who are using third party site building systems - sometimes putting inline code into a page on those systems can be restricted so you can't add our inline code to render your button. If you can create inline links you could try using the above example with the trigger method to open the Overlay (again remember you also need the master code on the page).

Did this help you?
100% found this useful
Thank you for submitting your feedback.

Upgrade your content

Want to give your users a graphical run-down of how your products or services work? Malcolm! Agency Services can help

Learn more

Hey there!

Malcolm! is brought to you by a passionate and dedicated team - we love all things customer support related! Find out more about us here

Find out more