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
Integrating the Wrapper option
- Pop-up content code format & best practice
- Code snippets
  - Promotional popup
  - Newsletter/form capture popup
Integrating the Callback option
Additional documentation

Getting Started

Enabling Webpage Pop-Ups using Optimove Web SDK

During your Web SDK Integration, request from the Optimove Product Integration team to enable one of the Webpage Pop-ups options below (Wrapper/ Callback).
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
Note:
- 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
Once implemented, log into your Optimove site to create the relevant templates, triggers and execute pop-ups.

Integrating the Wrapper option

Prerequisite

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

HTML

Notes:

The <html>, <head>, <body> tags are required within the Manage Templates

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<style></style>
	<body>              
        <!-- 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>
				<div>
					<!-- You can add form elements -->
					<input type="email" id="email">
					<button type="button" id="btn">Lorem</button>
				</div>
				<a href="#" id="some-link">Lorem ipsum</a>
			</div>
			<div class="optimove-after-submit" id="optimove-after-submit">
                Lorem ipsum dolor sit amet.
                <a  href="#"  id="close-popup">Lorem ipsum</a>
			</div>
        </div>
    </body>
    <script></script>
</html>

External Fonts

Notes:

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">

CSS

Notes:

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

<style>
.optimove-main-div{
	display: block;
}
h1 {color:red;}
.optimove-after-submit{
	display: block; 
}
</style>

JavaScript

Notes:

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

<script>
console.log("add your JS code");	
</script>

Newsletters and Form Capture

Notes:

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

<script>	
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
                 self.optimoveSDK.API.closeRealtimePopup(true);
                 
                 //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");
		self.optimoveSDK.API.closeRealtimePopup(true);
	}
         }();
         //user for integration on-boarding purposes only
         function initPopupLog (message){
             console.log(message);
             //when want to turn this off, just "return" instead
             //return;
         } 
</script>

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).

Notes:
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:
		if(response.Data){
			openAPopUp(response.Data)
		}
	}

}

//This SDK function will know to override Optimove Default pop-up and use this instead
optimoveSDK.API.setRealTimeOptions(options);

//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:

Options	Desc	Type	Default
showDimmer	Dims the rest of the page around the popup box	Boolean	True
showWatermark	Shows the Optimove watermark under the popup	Boolean	True
reportEventCallback	Use 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:	Function	setRealTimeOptions() 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
}