Article Body

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:

Folloze cannot take responsibility for any code you have added, for instance if code is broken and not running properly.
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.
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.

Select the board on which you want to add an embedded section and go to the Designer tab.
Hover over the border between sections where you want to add a custom section.
Click Add Section. The Section Gallery opens and displays the section types.
Select Custom from the section menu.
To add an embedded section, select Embedded section and then click Add Section. The new section appears on your board for you to design.
Open the Section Editor and paste the HTML in the text box.
A change in the script's location will trigger a page reload. This will determine if the additional script tags you paste below will be moved to the head of the page or not. Regardless, all scripts will load after the liveboard is ready (keep on head if not sure).
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.

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

Display HTML Sections in Full Width

HTML sections can now be displayed in full width, allowing embedded designs with their own background, layout, and styling to extend across the full board width.

This is useful when the HTML already includes a complete visual design and should appear as a seamless part of the board, without extra side spacing or “shoulders” around it.

When to use full-width HTML sections

Use this option when your embedded HTML includes:

A full background design
Edge-to-edge visual styling
Custom layouts that should span the full board width
HTML designs that should not sit inside the standard board content grid

Before this option was available, users often needed to add a background or adjust the HTML design to compensate for the standard board spacing. With full-width HTML enabled, the embedded design can display as intended.

Enable full-width support for HTML sections

Open the board.
Go to Page Settings.
Under Layout, select Full grid for Embedded Section only.

Once this setting is enabled, each HTML section on the board will include a Full grid toggle.

Set an HTML section to full width

Open the HTML or embedded section.
Turn on the Full grid toggle.
Save the section.

When the toggle is on, the HTML section will spread across the full width of the board.

Important notes

Full-width display applies only to HTML / embedded sections. This includes regular HTML sections, embedded headers, and embedded footers.

Other standard board sections will continue to use the selected board layout.

—-----

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

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

Article Created Date

10/9/2023 9:39 PM

Title

Designing an Embedded Section BuyEx3.0

URL Name

Designing-an-Embedded-Section

Zendesk Article ID

12458959282963