When creating a Landing Page you can add any HTML or CSS code in your text area boxes. The following guide gives you some ideas about styling possibilities and how to embed multimedia content.
How to embed CSS
You can embed custom CSS in your landing pages, in the branding section or in the custom css fields. Here are some example CSS code snippets.
<style>
/* Change Background Color */
body {background:#000}
/* Background Gradient */
body {background: linear-gradient(to right, red , yellow)}
/* Embed Background Image */
body {background: url("/img/background-example.jpg") no-repeat}
/* Fullscreen Background Image */
body {
background-image: url("/img/background-example.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Change Heading Text Color */
h1 {color:#f4f !important}
/* Change Type Font */
div {
font-family: "Times New Roman", Georgia, Serif;
}
</style>Style Landing Page elements
With your browser's inspector you can select an element in the landing page. After you have selected an element, the tag and the class of the element will be shown in the inspector window below.
In the branding section of a landing page, you can now define your own style for this element in the "Custom CSS" field. The following example shows how you can change the font size of the selected heading element h1.headline.
If you want to re-use your CSS code for other landing pages you can save the CSS code in a css template by clicking on the Add button.
Browser inspectorEmbed Google Fonts
<style>
@import url('//fonts.googleapis.com/css?family=Open+Sans');
body{font-family: 'Open Sans', sans-serif;}
</style>Use @import directive always at the very beginning of your css. Learn more about Google Fonts
Please note that in Europe since the 25th of May 2018 the new General Data Protection Regulation applies. If you integrate content from external servers (such as Google Fonts) on your landing pages, you should include a notice in your privacy policy with each service. You can put a personalized link to your privacy policy on every landing page in the GDPR section.
Embed your own fonts in Landing Pages
To embed your own fonts in your landing pages, go to the media section and upload the font you want to include by clicking the button Upload font.
Please note that the following fonts formats are accepted woff, woff2, ttf and eot.
All uploaded font files are listed in the media section. To use the font in your landing page please open the font tab by clicking the pen icon of the corresponding font.
In the tab you can choose between a source link and the url link. To copy the font link click on the copy icon.
Go to the landing page you have created, then open the branding section of the landing page and insert the link in the Custom CSS field as shown in the screenshot below. Save the input.
Always test your CSS Code
Before you insert CSS code into your page, always test it for correctness under the CSS Validator
Images
Images in the media library can be embedded in any landing pageIn the Media Library you can upload images or pdf documents. After uploading a file you can click on the pencil icon of the image and you will see an HTML snippet to embed the document on any of your landing pages e.g.
<img alt="qr icon" src="/img/qr-icon32.png"/>
YouTube Videos
Embedded Youtube video on a landing pageIntegrate videos from YouTube, Vimeo or any other video platform easily. The following code snippet shows how to embed a YouTube video via iFrame in your Landing Page. The video is automatically re-sized to the screen width.
<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//youtube.com/embed/MEG4VK2y1cI"></iframe>
</div>
Caution: Please always use the link to embed from YouTube //youtube.com/embed/1234 and do not use the link from the adress bar //youtube.com/watch?v=1234
Vimeo Videos
Embedded Vimeo video The following code snippet shows how to embed a Vimeo video via iFrame in your Landing Page. The video is automatically re-sized to the screen width.
<div class="videoWrapper"><iframe allowfullscreen frameBorder=0 src="//player.vimeo.com/video/44454530"></iframe>
</div>
MP4 Videos
Embedded MP4 VideoYou can also use the HTML5 video tag to embed video in mp4 format
<video width="100%" controls>
<source src="/resources/sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Google Maps
Embedded Google MapsYou can integrate a responsive iframe with a Google Maps location.
- Find your location on Google Maps and copy the "Share > Embed a map" HTML code (iframe).
- Use the following code on your landing pages to display the responsive Google Map.
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3167.607952022468!2d-122.16294098474549!3d37.44636533875898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fbb38fa3f36f9%3A0xf5692002b984147!2sApple%20Palo%20Alto!5e0!3m2!1sen!2ses!4v1581585855657!5m2!1sen!2ses" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>Embed JavaScript
You can include JavaScript code in text areas. However, make sure that you insert the code as one liner. Line Breaks will cause JavaScript errors.
<script>alert('hello');</script>Embed iFrames
Include iFrames e.g. in the "About me" section of your mobile business card.
<iframe frameBorder="0" src="/widgets/iframe-dummy.html"></iframe>
Embed external Websites
If you want to include an external website in your custom landing page, you have to pull all external resources like js, css and images into your landing page. To do so there is a usefull tool on Github - Inliner
Lead Landing Page
To create a form on a landing page and send the data to our server you can create a lead landing page.
You can then query the transmitted form data for a landing page collectively under the menu item Leads or via the API.
However, you can also create a form and send the form data easily to our server by using the following snippet on a custom landing page.
<script>
$(function() {
$('#submit').on('click', function() {
$.post("/api/post", $("form").serialize()).done(
function(data) {
alert('Thank you for registration!');
});
return false;
});
});
</script>
<form>
<label>Your Name</label>
<input name="name">
<label>Your E-Mail</label>
<input name="email">
<a href="#" id="submit">Register</a>
</form><input name="notify" type="hidden" value="1">
<input name="webhook" type="hidden" value="https://yourwebsite.com/api/webhook/lead">
<input name="rewardurl" type="hidden" value="https://yourwebsite.com/resources/test.pdf">
- With the field notify you can enable or disable E-Mail notifications when a new lead was generated
- With the field webhook you can set an external URL to which the new generated lead will be submitted
- With the field rewardurl you can set an external URL that the user will receive per e-mail after subscribing
<input name="lng" type="hidden">
<input name="lat" type="hidden">
<input name="accuracy" type="hidden">
The fields lng, lat and accuracy can be filled with the following JS snippet if the GPS function is activated.
<script>
$(function() {
const urlParams = new URLSearchParams(window.location.search);
$('input[name=lng]').val(urlParams.get('lng'));
$('input[name=lat]').val(urlParams.get('lat'));
$('input[name=accuracy]').val(urlParams.get('accuracy'));
});
</script>Call-2-Actions
Add call-2-action button to a landing pageYou can add call-2-action buttons on any landing page right from the landing page editor by clicking the Add icon. A call-2-action button may link to a web site, a PDF document, initiates a call or sends an e-mail. You can learn more in our What is a call-2-action (C2A) button tutorial.