Skip to content
Branch: master
Find file History

README.md

Webpage Pop-up Tech Guide


The Optimove Web 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 to a newsletter / form that triggered by conditions defined by the marketer within client’s Optimove site.

Getting Started

Enabling Webpage Pop-Ups using Optimove Web SDK

  1. During your Web SDK Integration, request from 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

    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

  3. 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:

<!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
  • Please see Javascript support above for more important notes
  • 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
  • The registerUser() can only be called once within the pop-up with one event
<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>

Testing your Pop-up

During your pop-up development and QA, you may want to preview the pop-up's code (HTML, CSS and JavaScript). You can do so by installing Optimove's Pop-up Preview Tool in your Chrome browser.


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
}

OR

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

You can’t perform that action at this time.