HTML on blocks

While we bring more and more look and feel customization to Landbot, you can still create amazing experiences with some easy steps to handle HTML. Here are our most popular hacks!

If you're more into videos than books, this is for you:

.

Text version:

Increase the font size of characters in a message

To increase the font size of a certain word or group of words within a message all you have to do is paste this snippet inside the Send Message block:

{html}<span class="lg-font">yourtexthere</span>{/html}

Just introduce the word/words whose size you want to be different ("yourtexthere")

It'll look like this:

Turn a URL into a hyperlinked text

If you want to share an URL, you may want to have some hyperlinked text instead to improve the design of your Landbot. 

You need to introduce this snippet in a Send Message type block in order to make it work:

{html}<a href="http://www.thewebyouwanttolink.com/" target="_blank" class="hu-btn hu-btn-sm hu-btn-block hu-btn-pink">Text of the button</a>{/html}

Turn a URL into a clickable button

If you want to share an URL, you may don't want it to look like some underlined piece of text, but an actionable button your users feel like clicking on! 

You need to introduce this snippet in a Send Message type block in order to make it work:

{html}<div class="menu-button hu-color_light hu-background-color_accent hu-border-color_accent-dark hu-background-color_accent-light_hover"><a target="_blank" style="color:white;text-decoration:none;text-align:center;" href="www.thewebyouwanttolink.com">The text of the button</a></div>{/html}

To the final user it will look like this:

You can also add regular text before and after the snippet to complete the information of the block. Note the URL will open up in a new tab!


Embed videos in messages

To embed a video in a Landbot's message, all you have to do is create a Send Message type block and insert this snippet:

{html}<iframe width="560" height="255" src="https://www.youtube.com/embed/JwNeLFi6GK0" frameborder="0" allowfullscreen></iframe> {/html}

Just change the URL to add the YouTube video you want to send to your visitors! Remember it has to be the "embed" URL, not the one from the browser (click on Share > Embed below YouTube's video to get the link).  It'll look like this:

Still need help? Contact Us Contact Us