Unbounce Answers/FAQ/Page Builder - Basics

How do I embed custom HTML or widgets into an Unbounce landing page?

Oli Gardner
posted this on October 21, 2010 11:17 PM

You can use our "Custom HTML" feature to embed most HTML code or script based components or widgets into your page as follows:

  1. Drag the Custom HTML object button from the object toolbar (on the left side of the editor) to the spot you would like it to appear on your landing page.
    custom_HTML.png 
  2. Paste your script/code into the window and click "done"
  3. Stretch the Custom HTML to be the correct size (this can be a process of trial and error after you preview the page)
  4. Save your page
  5. Click "Preview" to see it in action. It won't show up in the editor, just in preview mode and the final published page.
  6. Resize the Custom HTML component again to make sure the object you embedded shows up in its entirety
 

Comments

User photo
Michael Vandenbos

I'm trying to figure out how to upload a video and have the entire video show up in the box? 

January 17, 2011 06:33 PM
User photo
Oli Gardner
Unbounce

Hi Michael,

Have you uploaded your video to a public site (such as YouTube)? You'd need to have it somewhere that provides an embed code for you. This could be YouTube, Vimeo, Vzaar etc.

If you have any problems getting it to show up on your page once you have the embed code, please contact us at support@unbounce.com with your page details.

Regards

Oli

January 18, 2011 07:18 PM
User photo
Gen Martinez
Can I use a javascript and Ajax code with unbounce?
March 28, 2011 08:24 PM
User photo
Carter Gilchrist
Unbounce

Hey Gen, yes you can use javascript just like any regular webpage. You'll want to use the "Scripts" button in the toolbar to paste in your javascript, and you can set where you'd like it to appear (in the HEAD, before the end /BODY tag, etc..).

Ajax is a bit of a different story because it requires the data that you're sending or receiving to be on the same domain as the page that the request is coming from. There are some techniques to send and receive data cross-browser, but it's hard to know if it applies to you without knowing what you're hoping to achieve.

Hope that answers your questions!

March 29, 2011 11:11 AM
User photo
Dan Rukeyser

so, what do I do if I have a themeforest landing page theme? I've uploaded the html file and the css (well, I pasted the code and named it the original file), and it still doesn't look like it should. actually, it just looks like text. 

Suggestions? 

Thanks

 

May 14, 2011 07:57 AM
User photo
Jason Murphy
Unbounce

Hello Dan - there is no very straightforward way to simply upload a complete Themeforest template into Unbounce. In order to build any page in Unbounce you will need to upload your graphics into the editor, assemble them on your page, use the text editor to enter/edit any text components and then use the custom HTML and scripts features to embed any extra components that might be necessary.

 

If you have any further specific questions please email support@unbounce.com and we will do our best to point you in the right direction.

May 15, 2011 09:31 AM
User photo
Carter Gilchrist
Unbounce

Just want to add that we have a good blog post from Oli about how to build a ThemeForest template in Unbounce which you can read here:

Case Study: How I Created a Viral Ebook Landing Page – Using ThemeForest, PayWithATweet, KISSinsights and Unbounce

May 17, 2011 01:49 PM
User photo
David Holland

I have put a jsp form from Infusionsoft into an HTML element on a form.  In preview the width is okay but the element does not render the heigth properly so it truncates the form including the sumbit button.

jScript does not seem to have a positioning control that can be used for forms.

May 24, 2011 12:35 AM
User photo
Carter Gilchrist
Unbounce

Hey David, can you send an email to support@unbounce.com with a link to your page? We'll take a look and see what's going on. Thanks.

May 24, 2011 03:11 PM
User photo
Chad Doty

We use a different email system then mailchimp, aweber, etc. but have access to submit form data to the systems API.   Is this something we can test in just the free account?  Absolutely love the aesthetics of the product.

August 16, 2011 12:42 PM
User photo
Carter Gilchrist
Unbounce

Hey Chad, yes absolutely - you can test custom HTML components out with a free account. I would also take a look at our WebHook integration if you have some development resources available. It's a great way to use an Unbounce form to capture leads and conversions, and also fire them off to your own system (or a 3rd party that we don't yet integrate with).

August 16, 2011 03:53 PM
User photo
aaron drew

I want to hide the "source code" from people being able to view source and see the unbounce as a tool we are using. I found somethihng online that lets you cut and paste all of the HTML for the page into their tool and then encrypt it. I then cut and paste this code back into a blank and new unbounce page. The problem is that it shows the source code first and then when you scroll down further in the "preview" it shows the landing page. Any ideas how to make it so it just shows the landing page?

November 04, 2011 06:18 AM
User photo
Carter Gilchrist
Unbounce

Hey Aaron, unfortunately this falls a little bit outside the bounds of what we're able to help troubleshoot. Can I ask why you're looking to hide the source code of your published page? Please note that the Custom HTML component is not meant to contain any code that wouldn't normally be placed inside of the <body> and </body> tags.. so it won't be possible to do what you're trying to do for anything outside of those tags (i.e.: the <head> element.)

November 09, 2011 05:32 PM
User photo
Frank Taylor

I'm trying to embed a Twitter feed widget on my landing page using the custom HTML tool.  The code was generated automatically and I have followed the appropriate steps to do so but when I preview nothing shows up.  Did I miss something? 

December 06, 2011 10:00 AM
User photo
Oli Gardner
Unbounce

Hi Frank, if you could send your account email and the name of your page to support@unbounce.com we'll take a look into it.

December 06, 2011 01:40 PM
User photo
Hakeem Adebiyi

Hi I'm trying to add a you tube video so that when you click the play button on the sign in form it goes to video. 

January 30, 2012 02:00 AM
User photo
Rob Taylor

Hi. I've added some links in custom HTML blocks that I'd like to be counted as conversion goals when clicked on.

Is this possible, please?

I've checked the listed links in the Conversion Goals tab of the page editor, but these custom HTML links aren't in that list. Is there something I can add to the links within the custom HTML blocks?

March 01, 2012 01:22 AM
User photo
Ryan Engley
Unbounce

Hi Hakeem - If I understand correctly you want the video to show after your visitors submit your form, is that right?  If so, you can actually just embed the YouTube video on the confirmation dialog since by default, this is the page your visitors will see when they submit the form.  For more information on editing the confirmation dialog, have a look at the Forms and Form Data section of User Guide.

Hey Rob - you should be able to make that work by adding changing the links in your custom HTML block a smidge.  I should let you know that this isn't a supported feature (more of a workaround, really) and it will not work indefinitely as we make changes to the conversion tracking system.  But for now it should help you achieve the functionality you're looking for.  

Let's say that your landing page's URL is http://www.cheapelephants.com and the link in your custom HTML block is <a href="http://www.google.com">

You would need to edit the link in the custom HTML block to look this this instead:

<a href="http://www.cheapelephants.com/clkg/www.google.com/">

That should then track clicks of that link as conversions on your page.

March 01, 2012 10:55 AM
User photo
Rob Taylor

Hi Ryan, Thank you for your quick reply.

May I just check to ensure I understand this correctly?

Let's say that the other links (constructed in Unbounce's editor) go to various pages within http://www.cheapelephants.com/ , e.g.  http://www.cheapelephants.com/jumbo , http://www,cheapelephants.com/dumbo , http://www.cheapelephants.com/other-elephants - within the Unbounce editor, I've set each of these links as Conversion Goals.

The links within the custom block also go to http://www.cheapelephants.com/{various pages}. So say I had a link, within the custom HTML block, with an href of http://www.cheapelephants.com/jumbo , would editing the link to http://www.cheapelephants.com/clkg/www.cheapelephants.com/jumbo work, please?

March 08, 2012 08:53 AM
User photo
Sandeep Sood

Hi, 

unbounce is blocking pages  which is not secure? does it only accept https and nor http?

August 22, 2012 02:14 PM
User photo
Yvette Carnell

Hi, Just started Unbounced,have a Themeforest page, but the HTML button on the left is grayed out.. So how do I upload it? And I saw the "viral video" blog post, but it doesn't provide a step by step, pretty general. 

November 16, 2012 06:04 PM
User photo
Jacquelyn Ma
Unbounce

Hi Sandeep - very sorry the delay response. Would you be able to provide us with more details about the issue you are experiencing with https and http pages for  your Unbounce pages to support@unbounce.com? We'll probably want to dig further into this to understand what 'block' the pages may be putting up and for what reasons.

We look forward to hearing from you! 

November 19, 2012 02:43 PM
User photo
Jacquelyn Ma
Unbounce

Hi Yvette - to clarify, currently Unbounce does not support uploading of entire external HTML pages like a full Themeforest page. The HTML tool is moreso for including smaller snippets of customized HTML such as when you are embedding a custom item onto the page. Instead, you will want to recreate the format of your page using the tools of the page editor such as uploading the individual images (header, footer, etc.) as well as adding in your customized content. I would recommend reviewing the tools of the Unbounce page editor from our Unbounce User Guide to learn more about how these tools can help you achieve the page you are looking for. 

http://support.unbounce.com/entries/342854-03-page-editing-basics

If you are having with trouble with this process or have questions about any other particular process for creating your new Unbounce pages, please don't hesitate to contact us at support@unbounce.com and we would be glad to walk you through some of them!

November 19, 2012 02:56 PM
User photo
Rina Liddle

Hi, I am truly a novice and I have generated FB Like box code as per your instruction on the viral contest template, and the instructions did not mention where I should put the code in the placeholder, I just pasted over top all the instructions that were there, but I can't see the box in preview. Should I have done something different?

thanks!

January 13, 2013 01:01 PM
User photo
Rina Liddle

okay, never mind :)

January 13, 2013 01:06 PM
User photo
Aine Creedon

I am looking for an easy way to encourage other organizations to share our article content on their sites. I was hoping I could use Unbounce's nice widgets with our Facebook or RSS feed. Can you share this coding with others to use on blogs and websites?

January 30, 2013 09:11 AM
User photo
BPP Digital

Hi,

I've added a custom html box into the unbounce editor and by and large the page is fine.  However it doesn't display at the correct width.  I've noticed that you are forced into telling unbounce the exact width, in pixels, of the custom html place holder.  However I need to tell unbounce to stick to 100% width and not a pixel width.  Is this possible?

February 21, 2013 03:54 PM
User photo
Robin McFee

Is it possible to link to the unbounce custom images from within custom html? If so, what's the directory/routing structure for accessing the images?

March 13, 2013 03:34 PM
User photo
angeline mayasari

is it possible to integrate wordpress to unbounce? I use HTML editor and paste the RSS URL link, but nothing show up.

 

June 06, 2013 08:21 PM
User photo
Ryan Engley
Unbounce

Hi Angeline - I'm sorry to have to tell you that Unbounce doesn't have a WordPress integration. If you can work with a bit of HTML and embed your Unbounce page into an iframe with Wordpress though, that could do the trick.

June 07, 2013 09:28 AM
User photo
Jim Bird

Hi, is it possible to add to the body tag?  For instance 

<BODY onload="noBack();"
onpageshow="if (event.persisted) noBack();" onunload="">

or if not, do you have a function that will prevent the back button?

June 18, 2013 07:25 PM
User photo
Ryan Engley
Unbounce

Hey Jim - Unfortunately it's not possible to add code to your page's <body> tags. I don't know of any script that would let you do this otherwise but I might suggest also posting this is our community forum. Another Unbounce customer may have some experience with this.

June 19, 2013 06:38 AM
User photo
Jim Bird

Thanks, I appreciate the reply :)

June 19, 2013 10:42 AM
User photo
Tofig Hasanov

Hello Support! Can you please help with this issue? I am trying to put an image slider on my landing page. I have used http://www.slidedeckapp.com to contruct it. Now I have received two pieces of code blocks from them with the following explanation: 

1. Include the SlideDeck JavaScript Library

Copy and paste the code snippet below in your HTML page or website template within the <head> tag. This is the SlideDeck JavaScript core library and is required to display your SlideDeck on your website.

...code comes here...

 

2. Deploy Your SlideDeck

Copy and paste the code snippet below anywhere on your website where you want your SlideDeck to be displayed.

...code comes here...

I have used custom html component and put this code inside it, however it says that the code is wrong and cannot be published. Can you please explain me the correct way of inserting code into custom html component? Do i need to add any additional tags? Like <!DOCTYPE html> etc, or can I just paste the code directly?

Thank you,

Tofig

July 02, 2013 02:52 AM
User photo
Ryan Engley
Unbounce

Hello Tofig - it sounds like you're going about this the correct way. Unbounce's HTML validator will warn if there is a possible problem in the code however, it will not prevent the code from being published. As long as you correctly reference your JS library then paste in your slidedeck code, you should be all set.

July 05, 2013 12:19 PM
User photo
Mark Fickler
July 17, 2013 09:39 AM
User photo
Chris Anadon

I'm searching for a way to use my brightcove player with unbounce. Can you help? Ive tried using the custom html, doesn't work for me. I would rather not embed from youtube due to video quality. What can I do to get a brightcove player running?

August 22, 2013 01:13 PM
User photo
Ryan Engley
Unbounce

Hey Chris - is this an issue in Preview or on the published page? I believe Brightcove videos are hosted insecurely so while they won't play in Preview, they should work perfectly once published. If you continue to run into any issues, email support@unbounce.com and we'll see if anything stands out.

August 22, 2013 01:30 PM
User photo
Taylor Rose

Is it possible to upload a Zillow agent listing widget to unbounce using HTML?

April 14, 2014 03:06 PM
User photo
Quinn Omori
Unbounce

Hi Taylor - I just took a look at Zillow and it looks like all of their embeds are just straight HTML, so there shouldn't be an issue with embedding one in a custom HTML element. You should be able to just drag in the new custom HTML element and then paste the code you get from Zillow there. One thing to note is that custom HTML won't render right in the editor (and depending on the hosting, may not in preview), so you'll need to publish to see the Zillow code working live.

April 15, 2014 10:12 AM