You can embed a custom section and header on your board using your own code and design. 

This can be especially useful if you want to add your own exclusive header or an external website to a board. 

You can add as many custom sections as you need; however you can only add one embedded header to a board. 

When adding embedded sections or headers, keep in mind the following: 

1. Folloze cannot take responsibility for any code you have added, for instance if code is broken and not running properly.  
2. The board theme is not applied automatically to the embedded section. Make sure that the embedded sections match the overall board theme in terms of color and branding style.  
3. Folloze cannot deliver any analytics data for embedded sections and headers. 

Adding an Embedded Section 

Embed your own code in a custom section on your board.    

1. Select the board on which you want to add an embedded section and go to the Designer tab. 
2. Hover over the border between sections where you want to add a custom section.
3. Click Add Section. The Section Gallery opens and displays the section types.  
4. Select Custom from the section menu.  
5. To add an embedded section, select Embed Section and then click Add Section. The new section appears on your board for you to design.
6. Open the Section Editor and paste the HTML in the text box.
7. To design the section background, read the article Using the Background Editor.  

Adding an Embedded Header  

Embed your own code in a custom header on your board.    

1. Select the board on which you want to add a custom header.   
2. Go to the Designer tab on the board.
3. Hover over the border between sections where you want to add a custom header.
4. Click Add Section. The Section Gallery opens and displays the section types. 
5. Select Headers and Footers from the section menu.  
6. To add an embedded header, select Embedded Header and then click Add Section. 
7. Since you can only have one header per board, you will be prompted to confirm replacing the current header on the board.                                                                                                                                                                                                      
8. To replace the current header, click Replace.                       
9. Open the Section Editor and paste the HTML in the text box.                       
10. To design the header background, read the article Using the Background Editor.

How to style the embedded section/header elements to align with the board theme?  

As a developer, you can write the code in a way that it aligns with the style of the board theme.  

• Use Folloze variables to style the elements parameters. See the list of variables below.  
• Each company builds their own company theme variables for each Folloze variable. Contact your company admin to view the values of your company’s theme. 

Folloze Variables for Themes 

Refer to the following lists of Folloze variables to style the embedded section elements to align with the board theme.   

• Color Palette 
• Global Parameters 
• Headings 
• Buttons 
• Content Tabs 
• Tiles 
• Images 
• Sections 
• Checkboxes and Radio buttons 
• Item Viewer
• Outline 
• Article 
• Forms 
• Contact Card 

Color Palette 

Primary colors
--fz-color-primary-1
--fz-color-primary-2
--fz-color-primary-3
--fz-color-primary-4
--fz-color-primary-5
--fz-color-primary-6
--fz-color-primary-7
--fz-color-primary-8
--fz-color-primary-9
--fz-color-primary-10

Secondary colors
--fz-color-secondary-1
--fz-color-secondary-2
--fz-color-secondary-3
--fz-color-secondary-4
--fz-color-secondary-5
--fz-color-secondary-6
--fz-color-secondary-7
--fz-color-secondary-8
--fz-color-secondary-9
--fz-color-secondary-10

Tertiary colors
--fz-color-tertiary-1
--fz-color-tertiary-2
--fz-color-tertiary-3
--fz-color-tertiary-4
--fz-color-tertiary-5
--fz-color-tertiary-6
--fz-color-tertiary-7
--fz-color-tertiary-8
--fz-color-tertiary-9
--fz-color-tertiary-10

Neutral colors
--fz-color-neutral-1
--fz-color-neutral-2
--fz-color-neutral-3
--fz-color-neutral-4
--fz-color-neutral-5
--fz-color-neutral-6
--fz-color-neutral-7
--fz-color-neutral-8
--fz-color-neutral-9
--fz-color-neutral-10

Neutral one-offs
--fz-color-neutral-0 (always white)
--fz-color-neutral-1000 (always black)
--fz-color-neutral-text-0 (always white)
--fz-color-neutral-text-1000 (always black)

Success colors
--fz-color-success-1
--fz-color-success-2
--fz-color-success-3
--fz-color-success-4
--fz-color-success-5

Warning colors
--fz-color-warning-1
--fz-color-warning-2
--fz-color-warning-3
--fz-color-warning-4
--fz-color-warning-5

Danger colors
--fz-color-danger-1
--fz-color-danger-2
--fz-color-danger-3
--fz-color-danger-4
--fz-color-danger-5

Information colors
--fz-color-info-1
--fz-color-info-2
--fz-color-info-3
--fz-color-info-4
--fz-color-info-5

 

Global parameters 

Global Spacings
--fz-spacing-5x-small
--fz-spacing-4x-small
--fz-spacing-3x-small
--fz-spacing-2x-small
--fz-spacing-1x-small
--fz-spacing-x-small
--fz-spacing-small
--fz-spacing-medium
--fz-spacing-large
--fz-spacing-x-large
--fz-spacing-2x-large
--fz-spacing-3x-large
--fz-spacing-4x-large
--fz-spacing-5x-large
--fz-spacing-6x-large
--fz-spacing-7x-large

Global Weights
--fz-weight-thin
--fz-weight-light
--fz-weight-regular
--fz-weight-medium
--fz-weight-semi-bold
--fz-weight-bold: 700
--fz-weight-extra-bold

Global animations
--fz-animation-1-play-state
--fz-animation-1-name
--fz-animation-1-duration
--fz-animation-1-delay
--fz-animation-1-fill-mode

Global shadows
--fz-shadow-none
--fz-shadow-x-small
--fz-shadow-small
--fz-shadow-medium
--fz-shadow-large
--fz-shadow-x-large
--fz-shadow-x-small-top
--fz-shadow-medium-top

Global link colors
--fz-link-color
--fz-link-color-hover
--fz-link-color-visited
--fz-link-color-actived
--fz-link-decoration
--fz-link-decoration-hover

Global Border radius sizes
--fz-border-radius-none
--fz-border-radius-x-small
--fz-border-radius-small
--fz-border-radius-medium
--fz-border-radius-large
--fz-border-radius-x-large
--fz-border-radius-circle
--fz-border-radius-pill

Fonts
font family
--fz-font-family-1
--fz-font-family-2
--fz-font-family-3

 

Headings 

Global headings
--fz-heading-1-font-size-factor
--fz-heading-1-line-height-factor
--fz-heading-1-letter-spacing-factor

--fz-heading-2-font-size-factor
--fz-heading-2-line-height-factor
--fz-heading-2-letter-spacing-factor

--fz-heading-3-font-size-factor
--fz-heading-3-line-height-factor
--fz-heading-3-letter-spacing-factor

--fz-heading-4-font-size-factor
--fz-heading-4-line-height-factor
--fz-heading-4-letter-spacing-factor

--fz-heading-5-font-size-factor
--fz-heading-5-line-height-factor
--fz-heading-5-letter-spacing-factor

--fz-heading-6-font-size-factor
--fz-heading-6-line-height-factor
--fz-heading-6-letter-spacing-factor

--fz-paragraph-1-font-size-factor
--fz-paragraph-1-line-height-factor
--fz-paragraph-1-letter-spacing-factor

--fz-paragraph-2-font-size-factor
--fz-paragraph-2-line-height-factor
--fz-paragraph-2-letter-spacing-factor

--fz-paragraph-3-font-size-factor
--fz-paragraph-3-line-height-factor
--fz-paragraph-3-letter-spacing-factor

--fz-system-text-1-font-size-factor
--fz-system-text-1-line-height-factor
--fz-system-text-1-letter-spacing-factor

Text styles
--fz-heading-1-color
--fz-heading-1-weight
--fz-heading-1-font-family
--fz-heading-1-font-size
--fz-heading-1-letter-spacing
--fz-heading-1-line-height

--fz-heading-2-color
--fz-heading-2-weight
--fz-heading-2-font-family
--fz-heading-2-font-size
--fz-heading-2-letter-spacing
--fz-heading-2-line-height

--fz-heading-3-color
--fz-heading-3-weight
--fz-heading-3-font-family
--fz-heading-3-font-size
--fz-heading-3-line-height
--fz-heading-3-letter-spacing

--fz-heading-4-color
--fz-heading-4-weight
--fz-heading-4-font-family
--fz-heading-4-font-size
--fz-heading-4-line-height
--fz-heading-4-letter-spacing

--fz-heading-5-color
--fz-heading-5-weight
--fz-heading-5-font-family
--fz-heading-5-font-size
--fz-heading-5-line-height
--fz-heading-5-letter-spacing

--fz-heading-6-color
--fz-heading-6-weight
--fz-heading-6-font-family
--fz-heading-6-font-size
--fz-heading-6-line-height
--fz-heading-6-letter-spacing

--fz-paragraph-1-color
--fz-paragraph-1-weight
--fz-paragraph-1-font-family
--fz-paragraph-1-font-size
--fz-paragraph-1-line-height
--fz-paragraph-1-letter-spacing

--fz-paragraph-2-color
--fz-paragraph-2-weight
--fz-paragraph-2-font-family
--fz-paragraph-2-font-size
--fz-paragraph-2-line-height
--fz-paragraph-2-letter-spacing

--fz-paragraph-3-color
--fz-paragraph-3-weigh
--fz-paragraph-3-font-family
--fz-paragraph-3-font-size
--fz-paragraph-3-line-height
--fz-paragraph-3-letter-spacing

--fz-system-text-1-color
--fz-system-text-1-weight
--fz-system-text-1-font-family
--fz-system-text-1-font-size
--fz-system-text-1-line-height
--fz-system-text-1-letter-spacing

Buttons 

Global for buttons
--fz-btn-global-font-family
--fz-btn-global-font-size
--fz-btn-global-weight
--fz-btn-global-line-height
--fz-btn-global-letter-spacing
--fz-btn-global-padding
--fz-btn-global-text-color-0
--fz-btn-global-disabled-bg
--fz-btn-global-disabled-color
--fz-btn-global-disabled-border-color
--fz-btn-global-animation-transition
--fz-btn-global-focus-bg
--fz-btn-global-focus-color
--fz-btn-global-focus-border-color
--fz-btn-global-shadow
--fz-btn-global-border-radius
--fz-btn-global-border-width
--fz-btn-global-border

Primary button - meant for use on light background
--flz-primary
--fz-btn-primary-bg
--fz-btn-primary-color
--fz-btn-primary-border
--fz-btn-primary-hover-bg
--fz-btn-primary-hover-color
--fz-btn-primary-hover-border
--fz-btn-primary-padding
--fz-btn-primary-border-radius

Secondary button - meant for use on dark background
--flz-secondary
--fz-btn-secondary-bg
--fz-btn-secondary-color
--fz-btn-secondary-border
--fz-btn-secondary-hover-bg
--fz-btn-secondary-hover-color
--fz-btn-secondary-hover-border
--fz-btn-secondary-padding
--fz-btn-secondary-border-radius

Tertiary button
--flz-custom-1
--fz-btn-custom-1-bg
--fz-btn-custom-1-color
--fz-btn-custom-1-border
--fz-btn-custom-1-hover-bg
--fz-btn-custom-1-hover-color
--fz-btn-custom-1-hover-border
--fz-btn-custom-1-padding
--fz-btn-custom-1-border-radius

Forth button
--flz-custom-2
--fz-btn-custom-2-bg
--fz-btn-custom-2-color
--fz-btn-custom-2-border
--fz-btn-custom-2-hover-bg
--fz-btn-custom-2-hover-color
--fz-btn-custom-2-hover-border
--fz-btn-custom-2-padding
--fz-btn-custom-2-border-radius

Curved button
--flz-curved
--fz-btn-curved-bg
--fz-btn-curved-color
--fz-btn-curved-border
--fz-btn-curved-hover-bg
--fz-btn-curved-hover-color
--fz-btn-curved-hover-border
--fz-btn-curved-padding
--fz-btn-curved-border-radius

Link button - meant for use on light background
--flz-link
--fz-btn-link-bg
--fz-btn-link-color
--fz-btn-link-border
--fz-btn-link-hover-bg
--fz-btn-link-hover-color
--fz-btn-link-hover-border
--fz-btn-link-padding
--fz-btn-link-border-radius
--fz-btn-link-decoration
--fz-btn-link-decoration-hover

Link 2 button - meant for use on dark background
--flz-link-2
--fz-btn-link-2-bg
--fz-btn-link-2-color
--fz-btn-link-2-border
--fz-btn-link-2-hover-bg
--fz-btn-link-2-hover-color
--fz-btn-link-2-hover-border
--fz-btn-link-2-padding
--fz-btn-link-2-border-radius
--fz-btn-link-2-decoration
--fz-btn-link-2-decoration-hover

Circle button - share button
--flz-circle
--fz-btn-circle-bg
--fz-btn-circle-color
--fz-btn-circle-border
--fz-btn-circle-hover-bg
--fz-btn-circle-hover-color
--fz-btn-circle-hover-border
--fz-btn-circle-padding
--fz-btn-circle-border-radius

 

Content Tabs 

--fz-tabs-global-text-color-0
--fz-tabs-global-text-color-10

Tab-1 - classic content section tab
--fz-tabs-1-shadow
--fz-tabs-1-border-radius
--fz-tabs-1-bg
--fz-tabs-1-bg-hover
--fz-tabs-1-bg-selected
--fz-tabs-1-color
--fz-tabs-1-color-hover
--fz-tabs-1-color-selected
--fz-tabs-1-border-color
--fz-tabs-1-border-color-hover
--fz-tabs-1-border-color-selected
--fz-tabs-1-border-width
--fz-tabs-1-border-top
--fz-tabs-1-border-right
--fz-tabs-1-border-bottom
--fz-tabs-1-border-left
--fz-tabs-1-border-hover-top
--fz-tabs-1-border-hover-right
--fz-tabs-1-border-hover-bottom
--fz-tabs-1-border-hover-left
--fz-tabs-1-border-selected-top
--fz-tabs-1-border-selected-right
--fz-tabs-1-border-selected-bottom
--fz-tabs-1-border-selected-left
--fz-tabs-1-font-family
--fz-tabs-1-font-weight
--fz-tabs-1-font-size

Tab-2 - accent content section tab
--fz-tabs-2-shadow
--fz-tabs-2-border-radius
--fz-tabs-2-bg
--fz-tabs-2-bg-hover
--fz-tabs-2-bg-selected
--fz-tabs-2-color
--fz-tabs-2-color-hover
--fz-tabs-2-color-selected
--fz-tabs-2-border-color
--fz-tabs-2-border-color-hover
--fz-tabs-2-border-color-selected
--fz-tabs-2-border-width
--fz-tabs-2-border-top
--fz-tabs-2-border-right
--fz-tabs-2-border-bottom
--fz-tabs-2-border-left
--fz-tabs-2-border-hover-top
--fz-tabs-2-border-hover-right
--fz-tabs-2-border-hover-bottom
--fz-tabs-2-border-hover-left
--fz-tabs-2-border-selected-top
--fz-tabs-2-border-selected-right
--fz-tabs-2-border-selected-bottom
--fz-tabs-2-border-selected-left
--fz-tabs-2-font-family
--fz-tabs-2-font-weight
--fz-tabs-2-font-size

 

Tiles 

--fz-tiles-global-text-color-0
--fz-tiles-global-bg-color

--fz-tile-1-shadow
--fz-tile-1-border-radius
--fz-tile-1-social-icons-color
--fz-tile-1-icon-type-color
--fz-tile-1-title-color
--fz-tile-1-bg
--fz-tile-1-hover-color
--fz-tile-1-hover-bg
--fz-tile-1-font-weight
--fz-tile-1-title-font-family
--fz-tile-1-title-font-size
--fz-tile-1-description-font-family
--fz-tile-1-description-font-size
--fz-tile-1-description-font-weight

Images 

--fz-image-1-shadow
--fz-image-1-boarder-radius
--fz-image-1-border

 

Sections 

--fz-section-height-short
--fz-section-height-medium
--fz-section-height-tall
--fz-section-bg: transparent
--fz-section-padding-step

Checkboxes & radio buttons 

--fz-checkbox-radio-corner-radius
--fz-checkbox-radio-color-selected
--fz-checkbox-radio-color-unselected
--fz-checkbox-radio-color-selected-hover
--fz-checkbox-radio-color-unselected-hover
--fz-checkbox-radio-border-color

 

Item Viewer 

--fz-item-viewer-width
--fz-item-viewer-width-mobile
--fz-item-viewer-header-height

 

Outline 

--fz-outline-btn-focus
--fz-outline-btn-focus-offset

Article 

--fz-article-title-color
--fz-article-title-weight
--fz-article-title-font-family
--fz-article-title-font-size
--fz-article-title-letter-spacing
--fz-article-title-line-height
--fz-article-heading-color
--fz-article-heading-weight
--fz-article-heading-font-family
--fz-article-heading-font-size
--fz-article-heading-line-height
--fz-article-heading-letter-spacing
--fz-article-subheading-color
--fz-article-subheading-weight
--fz-article-subheading-font-family
--fz-article-subheading-font-size
--fz-article-subheading-line-height
--fz-article-subheading-letter-spacing
--fz-article-normal-color
--fz-article-normal-weight
--fz-article-normal-font-family
--fz-article-normal-font-size
--fz-article-normal-line-height
--fz-article-normal-letter-spacing
--fz-article-quote-color
--fz-article-quote-weight
--fz-article-quote-font-family
--fz-article-quote-font-size
--fz-article-quote-line-height
--fz-article-quote-letter-spacing
--fz-article-author-color
--fz-article-author-weight
--fz-article-author-font-family
--fz-article-author-font-size
--fz-article-author-line-height
--fz-article-author-letter-spacing
--fz-article-info-color
--fz-article-info-weight
--fz-article-info-font-family
--fz-article-info-font-size
--fz-article-info-line-height
--fz-article-info-letter-spacing

 

Forms 

--fz-form-title-color
--fz-form-title-weight
--fz-form-title-font-family
--fz-form-title-font-size
--fz-form-title-line-height
--fz-form-title-letter-spacing
--fz-form-label-color
--fz-form-label-weight
--fz-form-label-font-family
--fz-form-label-font-size
--fz-form-label-line-height
--fz-form-label-letter-spacing
--fz-form-privacy-msg-color
--fz-form-privacy-msg-weight
--fz-form-privacy-msg-font-family
--fz-form-privacy-msg-font-size
--fz-form-privacy-msg-line-height
--fz-form-privacy-msg-letter-spacing
--fz-form-input-border
--fz-form-input-border-hover
--fz-form-input-border-focus
--fz-form-input-bg
--fz-form-input-bg-hover
--fz-form-input-bg-focus
--fz-form-placeholder-color
--fz-form-input-color
--fz-form-bg
--fz-form-accent-color

Contact Card 

--fz-contact-card-color
--fz-contact-card-font-family
--fz-contact-card-border-radius
--fz-contact-card-icon-bg
--fz-contact-card-icon-color