How to Connect OptinMonster with a Webhook

OptinMonster offers seamless integration with webhooks using our native integration.

In this article, you’ll learn how to connect a webhook to OptinMonster.

Before You Start

Here are some things to know before you begin:

  • Webhook integration is available with a Pro or higher subscription.
  • Due to the advanced technical nature of the webhooks, we are not able to provide technical support at this time.
  • You can pass Smart Tag data along with the lead data using our Webhook integration. Learn more about Smart Tags.

Data Structure

Lead data will be formatted via JSON and resemble the example below:

{
   "lead": {
      "email": "hello@optinmonster.com",
      "firstName": "Archie",
      "lastName": "Monster",
      "phone": "888-888-8888",
      "ipAddress": "1.2.3.4",
      "referrer": "https://optinmonster.com"
   },
   "lead_options": {
      "list": "",
      "tags": [],
      "data": null
   "campaign": {
      "id": "nppjcagohkl4bx3w1zln",
      "title": "Demo (Popup)"
   },
   "smart_tags": {
   }
}

Your webhook can receive the following lead data:

  • lead
    • email – the email address submitted
    • firstName – the first name submitted (if name field is enabled in your campaign)
    • lastName – the last name submitted (if name field is enabled in your campaign)
    • phone – the phone submitted (if phone field is enabled in your campaign)
    • ipAddress – the IP Address of the computer the lead was submitted from
    • referrer – the URL of the page the campaign was submitted from
  • lead_options
    • list – list name (optional)
    • tags – tags to assign to lead (optional)
    • data – additional custom data that you want associated with each lead (optional)
  • campaign
    • id – the unique ID of the campaign submitted
    • title – the title of the campaign submitted
  • smart_tags
    • // list of smart tags used in the campaign

Connect Webhook

When you create a campaign in OptinMonster that you intend to collect leads with you’ll want to integrate with one or more services to send those leads to.

To send those leads to a webhook, follow these steps:

  1. Navigate to the Integrations tab in the campaign builder.
  2. Click Add New Integration.
  3. Search for and select Webhook from the dropdown field.
    Webhook Integration
  4. Enter your Webhook URL in the appropriate field.
    Don’t forget to add a unique label for easy identification (internal use only).
    Connect to Webhook
  5. Next, select the Connect to Webhook button.
  6. Once connected, an alert will appear containing the unique information about your webhook integration including the POST request URL.
    Webhook Integration details
  7. (Optional) You will also be able to configure additional Lead Options like List NameTagsData, and Store IP Addresses.
    Webhook additional Lead Options available in the campaign builder.
  8. When you’re finished, click Save.

Troubleshooting

I’m new to Webhooks, how can I find out more about them?

Some good resources to learn more about the basics of webhooks include:

I’d like to use Webhooks, but am not technical. Can I use Webhooks without writing any code?

Yes! Zapier allows you to get started using Webhooks without having to know how to code anything.

See our documentation for more ways to connect OptinMonster and Zapier:

I can only enable the ‘Name’ field in my campaign, how do I collect the First and Last Names?

OptinMonster will automatically detect if someone has entered their first and last names into the Name input field. You only need to enable the Name field in the Fields Element to collect both the First and Last Name.

Name Field

Is there a way to provide a custom error message from my Webhook?

If you manage the Webhook server and response, then you can specify your own error message via the Webhook response. If the response contains the “om_error_message” parameter, the error message will show that instead of the default “There was an error submitting your data.” message.

Is there a way to provide response data from my Webhook?

If you manage the Webhook server and response, then you can send back arbitrary data via the Webhook response. If the response contains the “om_response_data” parameter, this will be passed along to the webhook request response in the data parameter. Why would you want this? One example would be to modify the redirect URL for your form action.

Send the following response from your webhook:

{ 
   "om_response_data":{ 
      "redirect":"https://optinmonster.com"
   }
}

And place the following on your site to automatically use the response redirect data for a given campaign:

<script>
document.addEventListener('om.Optin.success', function( evt ) {
	if ( 'CAMPAIGN_SLUG' !== evt.detail.Campaign.id ) {
		return;
	}
	var response = evt.detail.response;

	if ( response &amp;&amp; response.data &amp;&amp; response.data.redirect ) {		
		document.addEventListener('om.Action.redirect', function( evt ) {
			evt.detail.Action.options.url = response.data.redirect;
		});
	}
});
</script>