Working with custom HTML

Guillermo Padilla

June 13, 2024 16:30
Updated

This article applies to the Email and Pages builder in all plans.

Overview

The Custom HTML content block allows you to easily add your own HTML code to a design created in the Beefree builder. It’s as simple to use as a text block.

HTML experts only: Using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (i.e. the "responsiveness" of the design). Make sure to use HTML that is email-compliant and responsive. Keep in mind that custom HTML is often outside of our scope of support.

Why use custom code?

There are many scenarios in which it makes sense to add your own HTML code:

Adding more customized content

You are not limited by a set of predefined parameters. This allows you more granular control of the styles applied.

Adding HTML 5 video, anchor links, etc.

You can now add content that is not available as a standard content element in the builder (HTML 5 video, anchor links, etc.).

Adding advanced effects with CSS

Get creative with animations! Please note that animation effects are not widely supported by email clients. However, when managed correctly, they can help your design go viral. Note that CSS can only be used in the HTML content block when designing Pages.

Adding live content from external providers

Custom HTML allows you to use advanced content in your designs. For example, you could create product recommendations, dynamic ads, personalized maps, or countdowns. Just copy and paste the code provided to you by the vendor that you are working with.

How do I add my HTML code?

To add your code just drag an HTML content element into your design. It works much like other content blocks, so you can place it anywhere in your design:

The newly inserted content block will show some placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area:

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Which HTML tags are allowed?

Note that this section applies only to custom HTML when used in the email builder. For information about using custom HTML in Pages, see the section below.

HTML Sanitizer for Email Builder

When using custom HTML in the email builder, a code sanitizer will validate your code. It will automatically correct some issues such as HTML tags that are left open. It will also strip out code that isn't often supported by email clients. For example, script and iframe tags are removed since they often cause deliverability problems or security risks.

How to Disable the HTML Sanitizer for Email Builder

Disabling the HTML Sanitizer for the email builder is an Enterprise plan feature. If you have an Enterprise account, and a role of admin or owner on the account, you can disable the HTML sanitizer.

To disable the HTML sanitizer, take the following steps:

Enter the Beefree App
Navigate to the workspace you'd like to disable the HTML sanitizer for
Click Settings
Scroll down to Builder Preferences
Navigate to Enable HTML sanitizer for email builder and saved rows
Toggle the HTML sanitizer preference to off

You will receive an in-app message asking if you to confirm the action

7. Click Yes, continue to complete the action

Allowed tags list:

a, abbr, acronym, address, area, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var

Allowed attributes list:

general attributes: style, id, class, data-*, title

a: href, name, target

img: align, alt, border height, hspace, src, vspace, width, usemap

table: align, bgcolor, border, cellpadding, cellspacing, width

tbody: align, valign

td: align, bgcolor, colspan, height, rowspan, valign, width

tr: align, bgcolor, valign

tfoot: align, valign

th: align, bicolor, colspan, height, rowspan, valign, width

thead: align, valign

li: type

map: name

area: alt, coords, href, shape, target

Using Custom HTML with Pages

The Page builder does not use the same sanitizer you'll find in our email builder. This means that it will not strip out syntax or fix any issues in your code. This is because browsers aren't likely to have limitations seen in email clients. If you want to use custom HTML on your landing page, you have complete freedom to do so.

If you have any questions, feel free to contact us.

Comments

26 comments

Lijen Tan

July 21, 2016 23:54
Hey there, I'm not seeing the HTML component with the latest version of Bee Plugin, is there something we need to do to enable it? Has it been released for the plugin? Thanks!
0
Sergio M.

July 22, 2016 01:07
Hi Lijen, the custom HTML content setting is found under Dashboard > Application details > Application configuration > Content in your developer portal: https://developers.beefree.io/login. Please note that this feature is only available in the BEE Plugin paid plans. Hope this helps!
0
Lijen Tan

July 22, 2016 03:35
Got it, thanks!
0
Sanath Yapatla

July 27, 2016 06:36
Hey, We have a lot of existing email Templates(HTML) in our database. Lets say if I add the entire of it in the custom html tag. Will it be editable as the other drag and drop components ?. If not Is there any algorithm or a piece of code which converts normal email html into your JSON format ?. I am justing waiting for this piece as its crucial in our case.
1
Guillermo Padilla

July 27, 2016 09:17
Hi Sanath, the HTML content work as an HTML editor, you enter code and edit code.

About template conversion, the output, the BEE JSON, is an strict format, so may work perfectly in a conversion tool. The problem is the input format, the HTML usually change a lot from an email to the other, and you need to manage too many exceptions.

The most used approach with this is:

- Maintain the old templates and editor as a legacy mode

- Offer the new editor and invest a little of time in creating new awesome templates
0
Guillermo Padilla

September 07, 2016 09:55
The HTML content has beed updated to support link maps on images 😄
0
Nick Vo

December 13, 2016 09:44
Hi,
Does the HTML content exist on BeeFree ? If it does, how to enable it ? Couldn't find out this page Dashboard > Application details > Application configuration > Content.
Thanks.
0
Guillermo Padilla

December 13, 2016 10:00
Hi Nick, all the information about the configuration are available here:
https://docs.beefree.io/server-side-options/#
0
Darshan

February 17, 2017 10:48
We have multiple accounts If i upload the images is it visible to all other accounts.??
For Ex:For a account if i upload some image like a.png.
If b account if i upload some image like b.png.
One More How to get the local path of image uploaded and save to my folder???
0
Guillermo Padilla

February 17, 2017 12:07
Hi Darshan, please, take a look at this article about the UID (user identifier):
https://support.beefree.io/hc/en-us/articles/360004546351-How-does-the-UID-parameter-work-
0
Aude Aprolis

April 06, 2017 09:03
Hi,
The HTML editor not allow to add bgcolor for that is a problem when i want to add color in my table.

What can I do and why can not we do this ?

Thx
0
Aude Aprolis

April 06, 2017 09:05
Actually I can not apply any color in any element of my table.
0
Sergio M.

April 06, 2017 18:36
Hi Aude, you should be able to add the bgcolor attribute in the HTML content block. If not, can you please clarify what you're trying to design?
0
Shane Weightman

May 02, 2017 16:24
Hi,

Once I've downloaded an HTML file from BeeFree, how do I then email that out to someone?
0
Sergio M.

May 02, 2017 16:39
Hi Shane, the BEE editor is simply a design tool. You can send a test send to a few email address within the editor, but for a bulk send you'll need a separate emailing/sending tool, or via your Gmail/Outlook inbox.
0
oleg.sobchuk

November 06, 2017 20:52
As I understood, premium users can use HTML block, can I edit entire template html code in BEE editor? Not only one block, but change constructor to HTML editor, and after some changes save my template to JSON/HTML as usual. Or I can use only HTML block? Thanks.
0
Guillermo Padilla

November 07, 2017 07:41
Hi Oleg, you can only use the HTML block. Further editing must be done after exporting the message. There is no conversion HTML to JSON.
0
Pablo

April 13, 2018 12:37
Hi, I like create my own tools for html customization. Exist a way to put my editor over the bee html-editor?? Just in case that the answer is no, I have a way to disable the editor of Bee for just allow changes through my custom editor?
0
Nick Vo

March 18, 2020 02:47

Edited
hi, I'm having problem on adding scripts to custom html block.
I already enabled Disable the HTML sanitize service in the HTML content block.
The scripts are added successfully but when I reload the page, the page couldn't be loaded correctly. Got error says: Invalid or unexpected token.
I remember It worked just fine before.
Please advise.
0
Willow Elliott

March 20, 2020 21:41
Hi Nick, thanks for reaching out. Could you please open a ticket with us about this issue so we can look into it for you?
0
Roger Coville

February 21, 2023 15:58
Hello,

Marketing cloud (Formally Exact Target) has custom scripting for things like tracking email opens:

<custom name="opencounter" type="tracking"/>

I cannot add this to my BEEpro templates in an HTML block -please help!!
0
Logan

February 22, 2023 16:33
Hi Roger,

Thanks for reaching out within our Community. I'm happy to help clarify some things!

Regrettably, this would be something usually done within post-processing by modifying the HTML Export of BEE PRO, usually within a code or text editor like Visual Studio Code or through a Email Sending Platform that supports adding email tracking. I apologize for any inconvenience. However, I hope that answers your question as to why this limitation is here within the BEE Builder.
0
Roger Coville

February 22, 2023 17:11
Logan,

Thank you for the reply - any thoughts about HTML comment tags



To assist in the post-processing for finding and adding the required Marketing Cloud or other tags?
0
tavo suyo

August 19, 2024 04:14
consulta...cuando agrego el HTML , se muestra la imagen, pero cuando pongo preview, no se visualiza.. a que se debe esto
0
Roisin Grieco

August 21, 2024 09:56
Hello Tavo!

As I believe there should be some more troubleshooting for your case, I will open a ticket on your behalf.

Please check your inbox.
0
Juniel Filappi

September 27, 2024 15:02
I'm facing a problem with a client who has a customized landing page and within an HTML block he has the script tag to apply a functionality to his page.
However, when generating the HTML using the JSON file and then trying to generate the image from this HTML using the page/image URL, it returns a 400 error saying that the HTML is invalid. The flow on my platform uses this image generation API to display a type of thumbnail in the client's landing page listing, so I need this functionality. I'm attaching an example of an error case.
0