Webpage Pop-up Tech Guide

When implementing Optimove Web SDK, the SDK provides a website content-based popup that will show your popup on specified pages. This can be used to either show a marketing message to a website user or have a user sign-up for a newsletter/form that is triggered by conditions defined by the marketer within the client’s Optimove site.

In this guide, we will cover the following:

Getting Started

Enabling Webpage Pop-Ups using Optimove Web SDK

  1. During your Web SDK Integration, request from the Optimove Product Integration team to enable one of the Webpage Pop-ups options below (Wrapper/ Callback).

  2. Once enabled, there are two options on integrating the Webpage Pop-up:

    2a. Wrapper option (Served by Optimove): Optimove will automatically handle the execution and displaying / serving of the popup in your website as part of the Web SDK integration. See Integrating the Wrapper option


    • The Wrapper option is not a "new window" pop-up, but rather an embedded Optimove code on your website
    • For Wrapper option position and sizes, please see Integrating the Wrapper option

    2b. Callback option (Served by the client): This will give you the ability to override Optimove's webpage pop-up functionality (#2a) and implement your own. See Integrating the Callback option

  3. Once implemented, log into your Optimove site to create the relevant templates, triggers and execute pop-ups.

Integrating the Wrapper option


Optimove Web SDK integrated on your website

Pop-up display notes:

  • The position of the pop-up is a fixed position centered in your website
  • The size of the pop-up is adjusted automatically according to you pop-up content
  • The pop-up does have a close (x) button allowing users to close the pop-up
  • The pop-up dimmer (background shadow behind the pop-up) and watermark is disabled by default. If you want to enable any of these, please request from the Product Integration Team.
  • The dimmer has a fixed CSS style opacity of "0.5"

Pop-up content code format & best practice



<!DOCTYPE html>
        <!-- You can add IDs to an HTML element -->
		<!-- You can add either in-style CSS or CSS classes to an HTML element -->
        <div id="optimove-main-div" class="optimove-main-div">
            <div id="optimove-before-submit">
				<h2>Lorem ipsum dolor sit amet.</h2>
				<p>Lorem ipsum dolor sit amet.</p>
					<!-- You can add form elements -->
					<input type="email" id="email">
					<button type="button" id="btn">Lorem</button>
				<a href="#" id="some-link">Lorem ipsum</a>
			<div class="optimove-after-submit" id="optimove-after-submit">
                Lorem ipsum dolor sit amet.
                <a  href="#"  id="close-popup">Lorem ipsum</a>

External Fonts


  • You can also add external fonts, such as Google fonts (see example below)
  • The external < link > tag should be added right after the < body > tag start
<link  rel="stylesheet"  href="https://fonts.googleapis.com/css?family=SomeFont">



  • You can add either in-style CSS or CSS classes to an HTML element
  • For external fonts, please see above
  • If using CSS classes to an HTML element, you can either add CSS in within the Manage Template, or pointing it to your website CSS
  • If you are using CSS classes, please make sure they are only to be used for the pop-up itself and not manipulate/change anything else in the Wrapper or your website
	display: block;
h1 {color:red;}
	display: block; 



  • You can add script tag after the < body > tag that only correlates to your pop-up html/css
  • The pop-up supports classic JavaScript code by default, including ECMAScript
  • If you prefer using jQuery, please make sure to add the library to your website
console.log("add your JS code");	

Newsletters and Form Capture


  • Form submittion should be used to either have your users join your newsletter or to collect data to be used within Optimove UI
  • In the example below uses the "signup" event which is a custom event and must be configured beforehand by the Product Integration Team in order to be accessible
initPopup = function()
	initPopupLog("inside pop-up");
	let btn = document.getElementById("btn");
	btn.onclick = function(event)
		initPopupLog("popup signup btn clicked");
		let $email = document.getElementById("email").value;
		let SDK_ID = email;					
		//registerUser() function sends both the SDK_ID and one custom event to Optimove
		self.optimoveSDK.API.registerUser(SDK_ID, email, "signup",
			email: email
                 //Optional: If you want the pop-up to close automatically upon form submission, use closeRealtimePopup(true) function, otherwise do not add this function
                 //Optional: If you want to show a message after the form submission and allow the user to close the pop-up by clicking the (x) instead of  closeRealtimePopup(true), use the following example:
		document.getElementById("optimove-before-submit").style.display = "none";
		document.getElementById("optimove-after-submit").style.display = "block";
	let closeBtn = document.getElementById('close-popup');
	closeBtn.onclick = function(event)
		initPopupLog("closing pop-up");
         //user for integration on-boarding purposes only
         function initPopupLog (message){
             //when want to turn this off, just "return" instead

Integrating the Callback option

If you prefer, you can override Optimove's Wrapper option in order to serve the popup yourself. This means you will be able to retrieve the marketer's message/HTML coming from Optimove campaign and display it in your website according to your own popup/banner functionality (see setRealTimeOptions() Definitions).

Optimove currently supports either Wrapper option or Callback option and not both

setRealTimeOptions() code snippet:

var  options  = {
	showDimmer :  true,
	showWatermark :  true,
	//Function reportEventCallback overrides Optimove Option 1 Default popup
	//response" is the message/HTML coming from the template created by the marketer in the Optimove site (see "Data" parameter below)
	reportEventCallback :  function(response){
		//insert here your own code to display the popup/banner if necessary
		//This is only an example:


//This SDK function will know to override Optimove Default pop-up and use this instead

//A function the open's your own pop-up
function openAPopUp(optimovePopupData){
	//some code that uses the Optimove data from Manage Templates (optimovePopupData) and opens the popup

setRealTimeOptions() Definition:

showDimmerDims the rest of the page around the popup boxBooleanTrue
showWatermarkShows the Optimove watermark under the popupBooleanTrue
reportEventCallbackUse this option to override the Optimove webpage pop-up in order to display your own code. In this event, the response argument will appear as:FunctionsetRealTimeOptions() Response Arguments (optional: your code)

setRealTimeOptions() Response Arguments

	"IsSuccess": true, //always set to true
	"Data": false  // when no realtime campaign was triggered


	"IsSuccess": true, //always set to true
	"Data": <HTML template>  // when a campaign was triggered, you will receive back the message/HTML

Additional documentation