by Dave | activecampaign
Active Campaign dynamic content.
In this video, we’re going to talk about delivering personalized dynamic content via Active Campaign to your people on your list and in this scenario, we want to send an email with an image of that person’s website. To do so, we’re going to take advantage of Google PageSpeed Insights API capability and we’re going to show a desktop version of the website, we could also do the mobile view if you want it.
Now, to make this work, we need to install some code on your web server and there’s a link there that you want to go visit and make modifications to it. I’ll be honest, this was inspired by services like len list, which I’m showing here, or nifty pics, which allow you to embed personalized images in emails. So let’s dive right in.
Now to start with, you’re going to want to visit this URL here. You’re going to copy this code, put it into a file on your website, I’d recommend creating a sub directory called images or pictures, and inside there create file called web hook dot php and then all of this code goes in there. You need to make some changes up here at the top, everything down below, nothing to do there, and to do so you want to either put yes or no here where it says debug Yes, if we’re just getting started and if something’s not working right, but really, you want to use No, if you’re winning this runs, we need to get into Active Campaign API, get the URL and key and then we need to create two custom fields, one that represents the URL of the website and the other that represents URL, the image of the website.
And I’d recommend simply using website for this one and website image for the next one, and then Optionally, you want to go to this link right here and copy or create an API key. You don’t need it at this time. Google’s been very generous and sharing this capability. They Just don’t want it abused.
So to start with, let’s simply go get the API URL and key, and then the custom field. So inside your Active Campaign account, you want to get a little gear icon down here, developer and then there should be a URL and a key. So those get copied back to here and put into this location here. So now to custom fields, so back to Active Campaign, I want to go to list and I’ve already created these ones and I am going to manage field.
You can make them specific to a list, but I’d recommend just having a generic and if you want, here’s what they look like. One’s called website, one’s called website image, and they’re both text fields. So there it is, General details and you know what, let me just show you. I’m going to make one, but I’m not going to use it. Let’s call it web site one and I’m just going to leave in a general grouping, and it’s a text input.
So go ahead and click on Add and this is what you would need to know website one, or in this case, website, website image. So let’s say goodbye to that guy. Yes, I know the world get into fight delete this, but Oh, well. So there we’ve got those two pieces of information. So you would put that into here, website right here, and website image. So once those are set up and ready to go, copy this file into a subdirectory and create a file called webhook dot php.
Now, here’s how we can get this to work. I’m going to create a form and I want to catch somebody’s email address and their website location, their URL. So I’m going to go ahead and create one called website and do I want to put them on list, sure, or I want to put them on a list, put them on a list, and you’re going to want to have a tag that’s going to be used to trigger an automation.
I’m going to go ahead and click on Create. So in this case really doesn’t mattera nd of course, there’s multiple ways to this, I’m just showing you the basic version, if you will. And I want to drag this guy, I don’t want to drag website image, just website right there and I’m going to make it required and probably want to, you know, tell them an example to put in.
Okay, so I’ve got that, I’ve got this required, and I’m gonna go to options, I am going to just leave things as is, probably should change this and what else I don’t want to actually ask for confirmation in this case and let us add another tag, add a tag and I think I’ve already created one trigger dash website.
All right. So that’s it. That’s However, you can accomplish this by catching their email and their website address, you don’t have to use the default Active Campaign. But you definitely need to map the website address to the custom field called website.
So I’m going to click on integrate. I’m going to get the link just for purposes of testing and I will just paste it in there will save an exit. Now, you want to create an automation, which I’ve already done, and it’s called screenshot, and there’s the trigger. So there’s my tag, and it’s called trigger dash website that’ll put them in there. First thing I want to do is send them to a web hook.
Now this is where I installed the script that I talked about in a subdirectory called demo and web hook. So you just need to paste that URL in there. I suggest putting a five minute wait in before you send an email and the reason is, this doesn’t this script runs but it doesn’t return results immediately. Might take up to 10 seconds and that could be problematic if you try and go to immediately send an email and it goes out right away, the chances of that happening are low, but you might as well perfect. So five minute wait, send out an email that looks something like this and do whatever.
But I’m just giving you a real basic one here and I’ll be honest, active campaign’s Email editor is not that great. So what I did on my opinion doesn’t really look that great, but here’s what I got. Thank you for submitting your website, we expect to hear back from us within one business day. And then this isn’t a custom HTML block, which I put in this code right here. That’s all you have to do the percent website underscore percent image percent is what represents the custom field.
And then I did a little styling I don’t know if I did anything in the background, but it put a border it’s solid, it’s got a radius of one, put some padding in there. Maybe in the custom HTML templates, it looks a lot better this Looks. Okay, my opinion, I think it can be improved upon by using a different template. And one of the things I’m going to point out here is I made this conditional.
So I went in search for website image is greater than, and I left this blank. So I don’t want to display this that there’s no link in there for the image. Now, in theory, I think I could have used exists, but I didn’t find that to work the way I expected. I know from previous experience, if I do is greater than and leave this blank, it will work. So why don’t we give this is a test.
Now I’ll go check my email in five minutes. Actually, I’m not going to wait that long. But the first thing is, let’s just make sure the website and potentially the website URL has been populated.
Alright, so there it is. I’ve got both this and this. And as you can tell, I’ve been through here a few times. So I’m going to go in move myself along. Now, here’s one thing I’ve noticed. Sometimes it says it failed, it doesn’t fail, think what’s happening is it’s slow to respond, because sometimes it takes up to 10 seconds for it to grab the image and I think active campaigns not waiting long enough.
The fact that I checked that there’s a URL in that field tells me it’s working. I’m going to go ahead and skip this step, and then go get that email to see what it looks like.
And there’s the image. So that’s what it looks like. Now I’m going to go one step further, and get a little bit fancier. If you remember, when this does something like this, where they put an image on top of an image. I think that looks a lot better and even better as if I if it was me in the picture, and I haven’t done that, but I’ve given a different shot of this.
So now let’s see if I’ve got updated image right here and website URL.
So there it is, again, I’ve got the tag. Now I’m going to go again and cheat a little bit and simply move myself to the end. Again, it says it fail, but it didn’t. Within a minute, I should have that email.
Now before we check the email to see the different one, here’s the picture I’m working with. I’m going to superimpose the website on top of this. I went and took a picture of my computer in the kitchen, the background looks like garbage. I don’t know why it’s glowing, orange, yellow, whatever. Even better picture in my opinion would be of you holding a computer and then superimposing their website or a phone with the mobile view.
Okay, this one should be a little bit different. So there it is. It’s got a website picture superimpose on a Mac Book computer in my kitchen.
So that’s how you used personalized dynamic content with Active Campaign.