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?
I have hard tile understanding this, could you be more specific?
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!
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?
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.
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 ?
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.
- drag a LINK webflow element, and set it to the https://my leadpages.net/ā¦ link (copy the one of the code)
- put your image inside the Webflow LINK element.
- 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.
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.
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: Share a read-only link | Webflow University
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: Webflow - Unity Gym
Itās just a test site for now, thereās nothing on it besides those buttons I was trying to create Thanks for taking a look at it for me.
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) : Google Chrome ā Tapes
Now Iām off to subscribe to unity gym
enter preformatted text here