How to Use OptinMonster with FluentCRM

OptinMonster with FluentCRM

Please know that some of the links below are affiliate links. These are items that I use and recommend. There's no extra cost to you, but I may receive a small commission if you buy something based upon my recommendation. Those commissions help us keep the blog running so we can keep sharing more info.

If you want to use OptinMonster with FluentCRM, you need to integrate with a Web Hook. Unfortunately, just creating a Web Hook isn't enough to get these tools to communicate with each other. You need to map the fields to transfer between OptinMonster and FluentCRM.

That's what I'm going to show you how to do in this post, step by step.

Why Connect OptinMonster with FluentCRM using a Web Hook?

At the time I'm writing this article, OptinMonster hasn't built a native integration with FluentCRM. You can easily connect OptinMonster to many of the SaaS email service providers, but systems without a native integration rely upon a Web Hook. It's the same technology Zapier uses to integrate so many different applications.

The problem we face when connecting OptinMonster with FluentCRM via Web Hook is that neither tool provides an easy way to map fields when they communicate.

Without this field mapping process, the transfer fails and FluentCRM cannot successfully determine the data structure coming from OptinMonster.

It seems that OptinMonster sends more information than FluentCRM expects.

How Do You Map Fields from OptinMonster with FluentCRM?

OptinMonster has a few tools to help us with the process. It's a bit technical, but it works.

You can use the OptinMonster Success Triggered Scripts to trigger a Post request in JavaScript. I'll share that script with you below.

Then you can use OptinMonster Smart Tags to send the data to FluentCRM. Smart Tags require a Pro or higher subscription plan with OptinMonster.

1: Create Your OptinMonster Form

The first thing you need to do is create your OptinMonster form. Doesn't matter what type. I've tested this process with Inline, Popup ad Slide-in forms.

Once your design is correct, you're ready to work on the Integration details.

2: Create an Incoming Web Hook in FluentCRM

Inside of WordPress, go to the FluentCRM Settings menu option. Once there, select Incoming Web Hooks.

FluentCRM Incoming Web Hooks
FluentCRM Incoming Web Hooks

Click the Blue button in the upper right corner to Create Webhook. You'll see a form like this appear.

FluentCRM Create Web Hook

The name field is whatever you want to call it so you know the purpose of the Web Hook. You can have a subscriber automatically added to a List or have Tags applied in the next two fields.

The Status field has two options.

FluentCRM Web Hook Status

Use Pending if you want the subscriber to confirm by email. If you use Subscribed, no confirmation email gets sent and the subscriber is ready to receive emails from FluentCRM.

Once you click the Create button, you get a screen like this one.

FluentCRM Web Hook Completion

notice that you don't see the web hook URL in this form. Click the Update button and you'll return to the FluentCRM Incoming Web Hook page.

Your web hook URL will appear there.

3: Create The Success Triggered Script

Now that you have your web hook URL, you'll use it inside of this script.

<script>
	(function(req) {
		if ( req ) {
			var xhr = new req();
			xhr.open('POST', 'https://yourdomain.com/wp-admin/?fluentcrm=1&route=contact&hash=blah-blah-blah-blah-blah', true);
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.send('email={{form_email}}&full_name={{form_name}}&first_name={{form_first_name}}&last_name={{form_last_name}}&phone={{form_phone}}&city={{city}}&state={{state}}&postal_code={{postal_code}}&country={{country}}&source={{campaign_name}}');
		}
	})(XMLHttpRequest);
</script>

The URL shown in bold is the web hook URL. You need to replace this code with the web hook URL from your FluentCRM installation. Otherwise, your form will send data to my Example script shown here.

Not really. Those lines of blah-blah-blah aren't really working, but it would still be a waste of your traffic.

If you look carefully at this script, you can see that it's mapping the form field data to FluentCRM variables.

4: Enter the Script in Your OptinMonster Form

Open your OptinMonster form and click the button you want your subscribers to click to submit the form.

OptinMonster Action Script

In the example above, you would click the JOIN NOW button on the form.

The left side panel will display some options for the Button. Notice the Action button to the Right of the Regular and Hover buttons. Click the Action button to reveal its settings.

You need to copy and paste your script and place it in the Success Scripts field, as shown on the lower left of the image above.

5: Set OptinMonster Integration

The only integration you need for this form is Monster Leads, as shown below.

You're not going to use the OptinMonster web hook integration, because we cannot control the data sent through that method. The script shown above handles the form data transfer.

OptinMonster uses Monster Leads, because some kind they require some kind of integration. Then OptinMonster sends the POST request with the smart tags dynamically replaced through the script.

It's CRITICAL that you do not add a Web Hook integration in OptionMonster, or anything other than the Monster Leads. If you do so, the integration will fail.

6: WP Rocket Causes a Problem by Default

I use WP Rocket, and noticed a problem. My forms weren't loading as expected.

That's because WP Rocket ships with some defaults to Delay Javascript, and one of the defaults suppresses OptinMonster forms.

WP Rocket Delay Javascript

You need to remove the second line from this list.

//a.omappapi.com/app/js/api.min.js

I'm not sure why it's there by default in WP Rocket, but it definitely delays loading of your OptinMonster forms. It was strange to visit a page with an embedded form and not see it, at least until later.

Thank You to OptinMonster & FluentCRM Support

I'd love to tell you that I figured all of this out myself, but I didn't. This came about due to great support teams at OptinMonster and FluentCRM. We have a solution now because they cooperated with each other.

At some point, I'm sure we'll have a native integration to use OptinMonster with FluentCRM. That would be ideal and much easier to implement.

For now, I just want to point out these two teams as an example of how important great support is when you buy something that you use to build your business. I'm happy to recommend using OptinMonster with FluentCRM.

It's only going to get better.

How to Use OptinMonster with FluentCRM

Related Articles

Responses

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Shares
Tweet
Share
Share
Pin1