Free plugin: Clickfunnels to Klaviyo Integration

yassine · May 25, 2017, 5:14am

Introduction

This free Clickfunnels plugin was built to overcome the complexity of integrating Clickfunnels and Klaviyo (autoresponder). It's easy to install as long as you can edit your Clickfunnels step and follow the instructions below.

Where Can It Be Installed?

This plugin can be used in all funnel steps (pages) that contain a minimum email opt-in box with a submit button. It can be used within an Optin Form, Order Form, Sales Page...etc.

This plugin will try to synchronize all/any of the fields below with your Klaviyo emails list:

email address
first name
last name
phone number
city (if not available will fallback to shipping city)
state (if not available will fallback to shipping state)
country (if not available will fallback to shipping country)
postal code (if not available will fallback to shipping postal code)

How To Install It In Your Clickfunnels Step?

As always you may install this plugin two ways:

Hosted Solution (Recommended)
Using this option would be the best for you, it’s free and our community members contribute to improving this plugin and keeping it up to date with latest standards, alongside keeping it compatible with latest Clickfunnels changes, so this option is highly recommended (all the codes are hosted by our community, and it’s super optimized for fast delivery through our CDN network).

Open your Order Form funnel step
Edit your Page
Under SETTINGS > TRACKING CODE
Add this script to your HEADER CODE as is
<script async src="https://community.funnelish.com/plugin-cf-to-klaviyo"></script>
Please do not change the code above, it should appear on your page like this:

Plugin: Clickfunnels to Klaviyo Integration Header Code730×131 8.53 KB
Add As many input boxes as you need on your funnel step. Please keep in mind only the fields specified in the section above will be synchronized with your Klaviyo emails list, others will be ignored
This is the tricky part, customization of your plugin
First of all, add this code snippet after the first line you added on step #4:
<script> var LIST_ID = "your list id"; </script>
Replace “your list id” with your actual list id, and “your api key” with your actual Klaviyo api key, remember to keep the quotes.

image.png727×226 12.2 KB
That’s it Save your changes and you are ready to go

When using the hosted option, our community of certified developers will make sure to keep the source codes up to date since it’s being used by many funnel builders from all around the world.

Own Hosted File (Advanced)
This option is advanced and doesn’t add any value compared to the hosted one. Unless you don’t really trust using our open source community hosted option I won’t recommend it. Anyways let’s go for it:

Follow the steps from 1 to 3 on the Hosted Solution steps above.
Copy all file content from the file below to your HEADER CODE area

github.com

Funnelish/Plugin-Clickfunnels-to-Klaviyo-Integration/blob/master/cf-to-klaviyo-plugin.js

/*\\\\\\\\\\\\\\\\\\\\\\\\--YaYo--///////////////////////////
 * \\      Copyright (c) Yassine Y. (Funnelish.com)       //
 *  \\               All Rights Reserved.                //
 *   \\\\\\\\\\\\\\\\\\\\----<>----///////////////////////
 *==========================================================
 * 	FILE         :  /Funnelish/cf-to-klaviyo-plugin.js
 * 	AUTHOR       :  Yassine Y.
 * 	DESCRIPTION  : 	
 *
 * 	UPDATES      :
 *           _CREATED : May 24, 2017  _By : Yassine Y.
 *           _CHANGED : May 26, 2017  _By : Yassine Y.
 */

function send_to_klaviyo() {
  var email="", fname="", lname="", phone="", city="", state="", country="", zip="";
  
  var emailbox = document.getElementsByName("email")[0];
  if (emailbox == null)
    return; // no email :o

This file has been truncated. show original

3. Follow steps from 5 to 7 on the Hosted Solution steps above.

Attachments

https://github.com/Funnelish/Plugin-Clickfunnels-to-Klaviyo-Integration/raw/master/cf-to-klaviyo-plugin.js

samlee · August 1, 2017, 12:34am

Awesome plugin, though I prefer ActiveCampaign, I wish there is a similar plugin to add and customize ActiveCampaign Tags for our leads throughout the whole funnel steps. At the moment Clickfunnels only supports ADD/Remove from a given list… no segmentation or tagging which is so wasteful for the whole potential of AC.

yassine · August 1, 2017, 2:52am

Well… building a new plugin for ActiveCampaign will be hard to integrate with the already pre-existing integration with Clickfunnels… maybe building similar plugin from scratch as the one above “might” be possible. Might work on it sometime.

Eric_Splitt · August 13, 2017, 2:23pm

I’m running the Hosted solution and it works perfectly. The only issue I’m getting now is that when I click the submit buttons, I get a popup from the browser that says,

“youdomain.com says:”
clicked
OK

Once you select the OK button then it proceeds to the thank you page. I have confirmed that it is this code implementation that is causing the issue. When I delete the Header Code, this issue does not occur.

yassine · August 13, 2017, 8:02pm

Sorry about that @Eric_Splitt and thank you for pointing me out to that glitch, I somehow forgot to remove the alert("click"); thing.

Anyways, I fixed that It should be working just fine, and You don’t need to update anything in case you’re using the hosted solution.

Please let me know if you come across any more glitches or have any other questions.

Hope that helps!

samlee · August 16, 2017, 9:38pm

Apparently, Click Funnels just got the ActiveCampaign integration issues fixed so no need for a plugin for that.

Now can easily add/remove contacts to/from lists, add/remove tags.

Eric_Splitt · August 29, 2017, 4:30pm

Thanks @yassine for fixing that. It has been working great since. However. Yesterday and today 90% of submissions did not get pushed to Klaviyo. No changes on our end. Is something up? I don’t understand why it would just stop working.

Eric

yassine · August 29, 2017, 5:43pm

YEP, i believe it’s Facebook that’s causing your backend code not to work.

It might sound “weird” but that’s what I’ve found on another plugin we’ve been building… Facebook is having too many glitches lately… and if the pixel fails all the subsequent code will…

Solution:

Temporarily remove the pixel code (including the event one).
Or Remove Facebook pixel code and event code, from the “header” sections of your funnel and your step, and instead add it to your “Body” section, while keeping the plugin’s code in your “header section”.
Or This might also work add the Klavyio plugin code alongside any important code “before” the pixel’s/event code, that way you’ll be sure whenever Facebook code fails it won’t affect your plugin code (I haven’t tried that but theoretically works).

As for the plugin, it never changed since the last “alert” fix, and our hosted service has been up since then, with no glitches.

Hope that helps!
– @yassine

Eric_Splitt · August 30, 2017, 8:21pm

I actually don’t have the facebook pixel on my page. It’s still not sending all entries to Klaviyo. It works when I test it myself from a desktop. But it does not work from Mobile.

Any ideas why mobile submissions are not triggering the script?

yassine · August 30, 2017, 9:48pm

What I would do is check the page to see what kind of errors are preventing the script from being called…

You may also share the link to your optin page or message me the link privately… so that I can check it out for you

I really don’t have a clue, unless I can see the page or an error.

Crystal_Fieldhouse · September 4, 2017, 2:18am

Hi, I’ve popped the code onto my order page, but it doesn’t seem to be sending any subscribers through to Klaviyo. How can I tell if there are errors on the page?
This is the page I have it on: https://ecology.clickfunnels.com/order-page16044997
Thanks in advance! Crystal

Eric_Splitt · September 4, 2017, 4:23am

I’m glad I’m not the only one @Crystal_Fieldhouse, It was working great for me for the first 2 weeks. Then it became intermittent, now it has stopped. One of the guys in my warehouse said he was also experiencing the same problem. What is weird is that when I test it myself from a desktop, it works. But when customers sign up, it does not. And I too, don’t know how to test the CF page for errors. Hopefully @yassine can help get this working again.

-Eric

Tim_Goodwin · October 18, 2017, 5:05pm

Did you find any problems? I’m having trouble getting this to work too?

The page I’m working on is this: https://patchpuppypress.com/collapsible-bowl-giveaway

Any suggestions greatly appreciated…

austinjdixon · October 30, 2017, 9:25pm

@yassine does this plugin work if we don’t have a paid Funnelish plan?

yassine · October 30, 2017, 11:57pm

Yep it should work without paying for funnelish in fact it’s not even included in funnelish, but I believe as of recent days Klaviyo has changed something in their platform causing the plugin to crush recently.

Thus, I really need to redo it so please be patient and hopefully provide any hints of issues you’ve encountered

austinjdixon · October 31, 2017, 2:32am

@yassine thanks for the note! Yeah, it seems to not be working for a client build I’m doing. I’ll try to look into it as well. In the meantime, do you know any alternatives to integrating Klaviyo with CF?

rpv · November 20, 2017, 4:34am

Awesome plugin. But does anyone know if this is working now?

yassine · November 21, 2017, 4:35am

###[UPDATE NOV 21, 2017]

Hey guys, I’ve updated the files, and made it faster to deliver as well as fixing the issues it had before
Now you can freely use it, with much less complexity, I’ve also updated the tutorial above, to fit the new instructions…

PS. It has been tested and it seems to work fine.

@rpv @austinjdixon @Tim_Goodwin @Eric_Splitt @Crystal_Fieldhouse

Let me know if you come across any issues using the code…

Enjoy!
– @yassine

Meghan_Dicklin · November 30, 2017, 4:25pm

Hi Yassine! Thanks so much for this plugin. My coding knowledge is very basic so I apologize in advance for these questions! You mentioned replacing “YOUR API KEY” with the actual API Key number. I didn’t see a VAR for the API Key listed above. Where will that go exactly? And in step 5 where you mentioned adding your input boxes, could you give me an example of what code I’d need to add for those? The only inputs I need are First Name and Email Address. Thanks!

austinjdixon · November 30, 2017, 9:46pm

Thank you so much @yassine!