1. Beefree Help Center
  2. Using Beefree
  3. Designing in the Builder
  4. Working with content blocks

Articles in this section

In this article

Working with custom HTML

Guillermo Padilla
  • Updated

BEE Pro becomes Beefree

We're still the same design suite you know and love, just with a new name. Our team is working hard to update our documentation, but you might still see some information or screenshots that are out of date.  

This article applies to both versions of the 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.
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.
 
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. 

Related articles

Comments

23 comments

Date Votes
  • Lijen Tan
    Lijen Tan

    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.
    Sergio M.

    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
    Lijen Tan

    Got it, thanks!

    0
  • Sanath Yapatla
    Sanath Yapatla

    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
    Guillermo Padilla

    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
    Guillermo Padilla

    The HTML content has beed updated to support link maps on images 😄

    0
  • Nick Vo
    Nick Vo

    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
    Guillermo Padilla

    Hi Nick, all the information about the configuration are available here:
    https://docs.beefree.io/server-side-options/#

    0
  • Darshan
    Darshan

    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
    Guillermo Padilla

    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
    Aude Aprolis

    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
    Aude Aprolis

    Actually I can not apply any color in any element of my table.

    0
  • Sergio M.
    Sergio M.

    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
    Shane Weightman

    Hi,

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

    0
  • Sergio M.
    Sergio M.

    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
    oleg.sobchuk

    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
    Guillermo Padilla

    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
    Pablo

    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
    Nick Vo
    • 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
    Willow Elliott

    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
    Roger Coville

    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
    Logan

    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
    Roger Coville

    Logan,

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

    <!-- Write your comments here -->

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

    0

Please sign in to leave a comment.

Trial

Cut down on email & page production time, keep everything organized, and enjoy the fantastic design flexibility of Beefree.

Start a free trial

No credit card required

Product
Resources
Integrations

Company