OptinMonster Documentation

Documentation, Reference Materials, and Tutorials for OptinMonster

Home

Docs

Using the OptinMonster API with Single Page Applications

Using the OptinMonster API with Single Page Applications

OptinMonster works on almost any website, including Single Page Applications.

In this article, we’ll provide some examples for using the Events API .reset() method to work with the OptinMonster API to deeply integrate with your Single Page Application.

Before You Start

Here are some things to know before you begin:

  • Due to the advanced nature of this guide, at this time we do not provide technical support for implementing .reset() in Single Page Applications.

Examples

You would update any of the following examples’ method to use your own unique OptinMonster account ID and user ID.

The method is formatted based on your account and user id: om{accountId}_{userId} so if your user ID is 1234 and your account ID is 5678 the object would be window.om5678_1234.

Vue Router

// Using Vue Router.
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
const router = new Router ({
// Your vue router settings.
});
router.beforeEach((to, from, next) => {
    if (window.om5678_1234) {
        window.om5678_1234.reset();
    }
    next();
});
export default router;

React Router V4

// Using React Router V4
import React from "react";
import { withRouter } from "react-router";
class App extends Component {
    componentDidMount() {
        this.unlisten = this.props.history.listen((location, action) => {
            if (window.om5678_1234) {
                window.om5678_1234.reset();
            }
        });
    }
    componentWillUnmount() {
        this.unlisten();
    }
    render() {
        return (
            

<div>{/* Your routes defined here. */}</div>


        );
    }
}
export default withRouter(App);

React Router V3

// Using React Router V3
import { browserHistory } from 'react-router';
class App extends React.component {
    componentDidMount() {
        this.unlisten = browserHistory.listen( location => {
            if (window.om5678_1234) {
                window.om5678_1234.reset();
            }
        });
    }
    componentWillUnmount() {
        this.unlisten();
    }
    render() {
        return (
            

<div>{/* Your routes defined here. */}</div>


        )
    }
}

EmberJS

// Using Ember.js.
import Route from '@ember/routing/route';
export default Route.extend({
    beforeModel(transition) {
        if (window.om5678_1234) {
            window.om5678_1234.reset();
        }
    }
});

AngularJS

// Using AngularJS.
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) {
        if (window.om5678_1234) {
            window.om5678_1234.reset();
        }
    });
});

NextJS

NextJS 14

You’ll also needs to embed the OptinMonster embed code. This is a sample main layout.tsx file:

FAQs

Where do I find my account ID and user ID?

To find your Account ID and User ID:

  1. Log into your OptinMonster account and navigate to the Account screen.
  2. Locate the Account-Wide Embed Code field. In the embed code, the numbers below will indicate your Account ID and User ID.

om user id, account id


Still stuck?

How can we help?

Last updated on


Start Getting More Leads & Sales Today with OptinMonster!

Start Getting More
Leads & Sales Today
with OptinMonster!

Create and launch smart capture forms today in minutes. What are you waiting for?

Create and launch smart capture forms
today in minutes. What are you waiting for?

OptinMonster has transformed our business. Before integrating their optins, our clients saw a 2% conversion rate from web traffic, which is slightly above the standard for their industry. With the integration of OptinMonster’s lightbox popup, exit-intent technology, split testing, and other tools, our client’s conversion rates soared by an unprecedented 500%. They attracted substantially more customers while spending less on digital advertising. Their success propelled them to the top of their markets, outperforming national chains and other medical spas with much bigger marketing budgets. Our client’s success in their market has distinguished us in our own. We are now one of the most sought-after marketing firms in the industry of aesthetic medicine. We know that the integration of OptinMonster, more than any other tool or marketing strategy, has supported this growth and achievement.

chris zelig medstar media

Chris Zelig

Partner, Medstar Media

OptinMonster has been a game-changer for us. From driving donations to collecting new leads, there is nothing that this simple tool has failed to accomplish. Our lead collection rate has jumped by over 1,000%.

joe lowe american bird conservancy

Joe Lowe

Director of Digital Communications, American Bird Conservancy

Through OptinMonster’s exit-intent popups, we have more than doubled our sales conversion rate. Best of all is the compound effect of using OptinMonster over a long period of time—more conversions mean more customers, which means more word of mouth.

mitch smith, managing director, shockbyte

Mitch Smith

Managing Director, Shockbyte.com