Streaming live at 10am (PST)

How to link html code to an image?


#1

We use Lead Pages and Lead Boxes for our marketing and need to be able to insert html code into an IMAGE on our website for this to work - can it be done? If so, how?


#2

I have hard tile understanding this, could you be more specific?


#3

Hi Vincent,
What I want to be able to do is click on an image and have it take me to a Lead Box (pop-up opt-in form) but I need to be able to insert code on the back end to do this... I can do it in word press but we are switching to webflow so I'm hoping we can do the same thing here. This is the code I used in wordpress:

Subscribe to Unity Gym today and gain exclusive access to health and fitness advice from industry leading health professionals.  Best of all, it's FREE!

FREE INSTANT ACCESS_button


#4

ok so my code that I pasted in here converted to the actual button hahha (I am not a web developer so code is not my forte) but basically, I inserted the image in word press then in the back end I inserted the Lead Box code to the image text so that it led to that Lead Box pop-up. Do you know what I mean?


#5

Haha, no, it's still very unclear (: But I'm almost positive your issue is a non-one... if only I can understrand.

So, first, post again your code here but use the toolbar to put it in code formatting so it won't be interpreted. It's the </> button right above where you type. And it does this kind of formatting.

Also, can you point me to the page where you get your code/instructions for this popup to work? Thanks.


#6

LOL, we'll get there eventually... let's try again. Below is the full code I have used in Wordpress to allow my yellow button that says 'gain instant access' to go to the pop-up lead box.

<h1 style="text-align: center;"><span style="color: #ff6600;">Subscribe to Unity Gym today and gain exclusive access to health and fitness advice from industry leading health professionals.  Best of all, it's FREE!</span></h1>
<p style="text-align: center;"><a href="https://my.leadpages.net/leadbox/14791da73f72a2%3A11c5a3f9ab46dc/5675267779461120/"><img class="size-full wp-image-2170 aligncenter" alt="FREE INSTANT ACCESS_button" src="http://unitygym.com/wp-content/uploads/2012/09/FREE-INSTANT-ACCESS_button.jpg" width="417" height="63" /></a></p>

This bit here: "https://my.leadpages.net/leadbox/14791da73f72a2%3A11c5a3f9ab46dc/5675267779461120/" is the code I was given from Lead Boxes to use in my website image and I inserted in in the middle of the image code that was already there.

In Webflow however, I can't see what's going on behind the curtain in terms of code, so I can't insert this bit. All I can do is add an 'html embed' piece but that only converts my code to text which is not what I want. I want to embed the code into an IMAGE... if possible.

The code I got from Lead Boxes looks like this:


I hope this helps ? smile


#7

Hehe, yes it helps (: From the beginning, don't be offended when I say "adding code to an image" make little sense, hence me asking for so much precisions (:

Let's forget about the code you've pasted here and focus only on the last image here, what LeadBoxes tells you to use. They give you a piece of code, composed of a link (everything between <a> and </a> plus a script (between <script> and </script>).

Just grab this code and paste it in an Embed component. It should create a link to your popup.

Now I understand you want this link to be your big fat yellow image button. Well, let's apply this link to this image then.

  1. drag a LINK webflow element, and set it to the https://my leadpages.net/.... link (copy the one of the code)
  2. put your image inside the Webflow LINK element.
  3. add your script top the page. Anywhere. Place an Embed element anywhere, it won't be displayed, and place the <script> to </script> code in it. Alternatively you can put it in your site's parameters embed section, in the Body section.

This should work.

You can also entirely write this by hand. It will look like


#8

Hi Vincent,

No offence taken, as I said I am not a web developer I'm just trying my hardest to work with the little knowledge I have... html code doesn't make much sense to me besides that if you put it somewhere it will do something else!

Thank you so much for persevering with me.

I have tried what you suggested but it still doesn't work. I've tried it many times and published and the button/image still doesn't work. It goes nowhere when you click it.

I've done exactly as you have listed from steps 1 to 3 - still nothing happens. The image is there and you can click it but it goes nowhere. I've tried using just the <a> code and just the <script> code and even both and still it won't work.

Only the underlined text works but I don't want it anywhere on my page - it's ugly. I want the button to do what the underlined text is doing.

Follow this link to the published site and see:
http://unitygym.webflow.com/

Sorry if I am just being a total newbie and missing what you are saying but perhaps there is a tutorial video you can direct me to instead? It seems like such a simple thing to do but something is getting lost in translation here.


#9

Can you share the public link of your site with me? You can PM it to me if you want. (click on my icon)

Enabling public link: http://help.webflow.com/sharing-your-public-webflow-site-link


#10

Hi Vincent,

Cant see where to PM you, when I click on your icon it only takes me to the forum but there is no 'new message' option or anything...

Anyway here it is: https://webflow.com/design/unitygym?preview=d8242953911bf10dc15975e523c0dfb4

It's just a test site for now, there's nothing on it besides those buttons I was trying to create smile Thanks for taking a look at it for me.


#11

You should see a popup with a Message button, like this ; http://cl.ly/image/1T050z201e2M

Ok, for your code : hurray, you're almost there! You've done a bit of a mess in the LINK SETTINGS. You've pasted the entire code , starting from <a... until the script, in the URL field of the LINK SETTINGS, where you only need the actual URL (starting by HTTP://.

SO, here :

You need to type only this : https://v.usetapes.com/rwz5USNf5e

Look how it solves your issue (and see me make a mistake on the way) : https://v.usetapes.com/rwz5USNf5e

Now I'm off to subscribe to unity gym wink

enter preformatted text here

#13