Building a custom template

What is a custom template?

A custom template allows you to define your own HTML/CSS for your email newsletter. This means you can use the power of Goodbits to collect content, and drag & drop the articles onto the design you would like to see.

It's as simple as amending our existing components, adding your own components or even adding your own full template and components.

Please note that knowledge of email HTML and CSS is required. If you don't have this knowledge, we advise you to invite a team member to your newsletter that does.

Getting started

To get started, head over to the settings of your newsletter, and enable it in the "Custom Template" tab

This will copy our default template and components for you to edit or replace.

Amending our components are easy, simply head into the components and edit the HTML. If you want to add new fields, have a read of the Components Fields below.

Overview of setting up a full template

If you are going to use your own HTML template, it should be able to be split into horizontal rows of HTML blocks. Normally emails are built using rows of "<table>" structures, these would be what we call the component you define.

It's as simple as these steps (we explain in detail below):

Define your parent HTML and CSS
Replace our named components or add new ones, by copying and pasting your rows of HTML (usually a html <tr> table row)
Edit the components and replace the areas that you want to edit in our builder or be replaced by articles title, description, and images
Upload any assets you want to use in the template on every email
Preview and testing are updated with the builder for you to test
Done.

Define your parent HTML

If you are uploading your own template, you will need to change the Parent HTML. This is the wrapping HTML for your email. This will include the HTML "<head>" and common CSS styles.

Inside the "<body>", you must enter the tag {{ rendered_content_blocks }} - which will be replaced by the content of the email you are building in Goodbits.

Rendered content field and other considerations for this, CSS.

How does CSS work?

We inline CSS styles that are defined in your parent HTML, or you can define inline styles on the components themselves.

Whenever you change a component and refresh the email editor, the changes will be updated.

Components Field Tags

Any field wrapped in two curly brackets will become editable in our editor. So in a component, if you replaced some HTML with {{ title }} there will be a field for your to enter text for the title. We have some special fields for images, HTML blocks and ones that we automatically fill when you link a component to an article.

Special form elements:

{{ introduction_line }} - Will show a string input field in the form called 'Introduction line"

{{ html_subsection }} - Will show a field named subsection as a HTML editable field, essentially adding the prefix of "html_" to any field you want to show a HTML editor for.

{{ thumbnail_url }} - Will show a thumbnail picker in the form. And set the final URL of the hosted thumbnail URL. The thumbnail image candidates are obtained from the URL entered in the 'link_to' field set on the component. If you don't have a 'link_to' field, we recommend using the 'image_url' tag. You can change the image dimensions in the component editor also.

{{ image_url }} - When you would like to upload an image or banner of your choosing. You can set the image dimensions from the left side of the component editor.

{{ link_to }} - You will be able to enter a URL that allows you to click a button to automatically fetch fields "title", "html_description" and "thumbnail_url". It will also fetch image candidates to show an image picker for your "thumbnail_url" field.

Here is a breakdown of fields we fill from an article you connect from your library. To enable this to work on a component, make sure you have checked the option 'Supports dynamic content'.

{{ title }} - The page title or text from the tweet (etc).

{{ html_description }} - This is the meta description we fetch for an article or content that is collected from a source in your library.

{{ thumbnail_url }} - We pick the first image candidate we extract from an article or link.

{{ link_to }} - The link to the content will be set.

You will see some fields starting 'gb_', these tags reference colors and design settings shown in our design tab. You are welcome to reference these if you like.

If you are looking to have conditional toggles like some of our components have or hint descriptions, ping us on support and we'll be happy to help.

Supports dynamic content

Each component can support being constructed from content you have saved in your library. This is what is meant by the checkbox called 'Supports dynamic content. When this is enabled on a component, you will be able to add content from the library as this style of the component.

Other notes to consider

Our 'Billboard' component has a custom thumbnail creator that darkens the image. So keep this in mind if you don't want the thumbnail to be made darker.