What are Content Blocks & Accordions?

The content in your workflows is essential. Ensure that what needs to be seen by your Agents and end-users is easily identifiable. Sometimes, a lot of text on a node can be overwhelming, and vital information gets lost. This is where Content Blocks can help. Agents will quickly learn to identify them by their color and appearance.

Likewise, sometimes you want to collapse content so that it stays out of the way until it's needed. Accordions make it simple to keep lengthy content hidden until the user takes action to view it.

Content Blocks

Highlighting essential content is easy. You can customize the title and, of course, the content itself. You can also completely change how they are styled by using CSS. There are four types of blocks. Here’s what they look like by default and what they are typically used for:

Script Block:

A Script Block is typically identified as something an Agent is meant to say aloud.

Action Block:

An Action Block highlights an action that may need to be taken at this step. Insert these to draw attention to instructional information.

Note Block:

A Note Block is typically used to emphasize a special piece of content.

Alert Block:

Reserve the use of Alert Blocks for content that is extremely important.

How to Add Content Blocks

You can insert Content Blocks into any Content Node directly from the editor toolbar:

Upon clicking the Content Block icon, you will be presented with these options:

• Choose your preferred block. See the definitions above for reference.
• Click the Save button when you have made your choice.
  
• The chosen block will be inserted into your Content Node wherever your cursor was positioned when you clicked the toolbar icon:

• Click into the block title to edit it.
• Click into the block content area to edit the content. This area accepts almost any content, including images, videos, and tables. You can even insert Content Blocks within other Content Blocks.
  
• You can also insert Accordions into Content Blocks: 
  

Removing Content Blocks and Changing the Block Type

Deleting a Content Block

• Click into the block and click the Delete icon:
  

Changing the Content Block Type

• Click into the block and choose the Options icon.
• Choose the type of Block you'd like to apply instead.
  

Note: If you have customized the block title, it will revert to the default title when you change the block type. You can reapply your title. The content within the block will remain unchanged.

Changing the Style of All Content Blocks with CSS

This is described at the bottom of this article, along with sample CSS snippets and a full CSS reference.

Accordions

Accordions are a highly useful feature and one of our most requested. Now, it's easy to add them to your Content Nodes directly from the node editor. Here’s how they look by default:

When to Use Accordions

• Hide lengthy content until the user takes action to view it.
• Hide information that experienced Agents don’t need every day but is helpful for newer Agents to reference.
• Using Transcripts and All Data displays? They can be lengthy. Use Accordions to collapse them and expand when necessary.

How to Add Accordions

Just like Content Blocks, Accordions are simple to add to any Content Node.

• Click the Accordion icon in the editor toolbar:
  
• Choose the number of Accordion panels/blocks you would like to add — anywhere from 1 to 50.
• Click the Save button.

Editing Accordions

Once you've added your Accordion, you can easily edit the following:

• Accordion Block Title: This is the area that end-users will click to expand and view the Accordion body. Edit this title to reflect the content within that section.
• Accordion Block Body: This area expands when the title is clicked, revealing more content. Add your content here — text, images, videos, tables, and even Content Blocks can be added.
• Expand/Collapse Behavior: By default, Accordions load in a closed state. To have a panel open by default, click the Closed button — it will switch to Open. Preview your node to confirm the behavior. The editor always displays content in an open state to make editing easier.
• Deleting an Accordion Block: To remove an Accordion panel, click the Delete button.
• Add Block: Click the Add Block button to add more expanding panels to the Accordion.
• You can even insert Content Blocks and other Accordions within the Accordion body:
  

Applying Custom Styles to Content Blocks & Accordions

The elements of each Content Block and Accordion are easily customized with CSS. You can add custom CSS to your workflow's Settings > Code tab. Stay tuned for more CSS snippets and examples.

Pick your favorite from the examples below, copy the CSS, and paste it into Settings > Code of your workflow.

Important You will not see your customizations rendered in the editor; however, they will be visible when the workflow is viewed or previewed.

Blue Script Block:

<style>
/* Blue Script Block Title Background Color */
.zt-content-block.zt-cb-type-script>.zt-cb-title {
        background-color: #1668FF !important;
}

/* Blue Script Block Background Color */
.zt-content-block.zt-cb-type-script {
    background-color: #D0EBFF !important;
}
</style>

Note: The colors of the different content blocks can be modified using the example above. Replace the word 'script' in .zt-cb-type-script with one of the following: action, note, or alert, then change your color choices.

Clean & Bordered:

<style>
/* Clean & Bordered Content Blocks */
.zt-content-block.zt-cb-type-script {
    background-color: #D0EBFF !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #1668FF !important;
}
.zt-content-block.zt-cb-type-script > .zt-cb-title,
.zt-content-block.zt-cb-type-script > .zt-cb-title h3 {
  background-color: #D0EBFF !important;
  color: #1668FF !important;
}

.zt-content-block.zt-cb-type-script > .zt-cb-title > .zt-cb-icon {
    color: #1668FF !important
}
.zt-content-block.zt-cb-type-action {
    background-color: #C9E7D4 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #1C953B !important;
}
.zt-content-block.zt-cb-type-action > .zt-cb-title,
.zt-content-block.zt-cb-type-action > .zt-cb-title h3 {
    background-color: #C9E7D4 !important;
    color: #1C953B !important;
}
.zt-content-block.zt-cb-type-action > .zt-cb-title > .zt-cb-icon {
    color: #1C953B !important;
}
.zt-content-block.zt-cb-type-note {
    background-color: #DBE1EB !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #131519 !important;
}
.zt-content-block.zt-cb-type-note > .zt-cb-title,
.zt-content-block.zt-cb-type-note > .zt-cb-title h3 {
    background-color: #DBE1EB !important;
    color: #131519 !important;
}
.zt-content-block.zt-cb-type-note > .zt-cb-title > .zt-cb-icon {
    color: #131519 !important;
}
.zt-content-block.zt-cb-type-alert {
    background-color: #FFE6E5 !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #99131D !important;
}
.zt-content-block.zt-cb-type-alert > .zt-cb-title,
.zt-content-block.zt-cb-type-alert > .zt-cb-title h3 {
    background-color: #FFE6E5 !important;
    color: #99131D !important;
}
.zt-content-block.zt-cb-type-alert > .zt-cb-title > .zt-cb-icon {
    color: #99131D !important;
}
</style>

Changing the Icons

Content blocks support all Font Awesome 5 Free icons. Simply find the icon you would like to use and copy its Unicode:

For example, if you wanted to replace the default Script icon with the comment icon displayed above, you would copy the unicode f075, then place this CSS in your workflow's Settings > Code:

/* Script Icon */
.zt-content-block.zt-cb-type-script > .zt-cb-title > .zt-cb-icon::before {
    content: '\f075' !important; 
}

Note: Each of the different content block icons can be modified by using the example above. Simply replace the word 'script' in .zt-cb-type-script with one of the following: action, note, or alert, then change your icon choices with the Font Awesome unicode that you would like to use.

Full CSS Reference for Content Blocks and Accordions

You can pull out pieces of this CSS to modify and place it in your workflow's Settings > Code tab. 

Important You must designate ALL of your modifications with !important for them to render. We've done that for you here and commented the elements for easy reference:

<style>

/* CONTENT BLOCKS */

/* Width, border radius, and text color for all content blocks */
.zt-content-block {
    position: relative !important;
    display: inline-block !important;
    min-width: 100% !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    color: #000 !important;
    overflow-wrap: anywhere !important;
}

/* Title positioning for all content blocks */
.zt-content-block .zt-cb-title {
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
}

/* Icon style for all content block titles */
.zt-content-block .zt-cb-title i.zt-cb-icon {
    display: block !important;
    color: #fff !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    flex-shrink: 1 !important;
    margin-right: 10px !important;
}

/* Title layout */
.zt-content-block .zt-cb-title h3 {
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* Title font size, weight, and color */
.zt-content-block .zt-cb-title,
.zt-content-block .zt-cb-title h3 {
    font-size: var(--font-size) !important;
    font-weight: 600 !important;
    color: #fff !important;
}

/* Content block body padding */
.zt-content-block .zt-cb-body {
    padding: 8px 12px !important;
}

/* Paragraph spacing in content body */
.zt-content-block .zt-cb-body p {
    margin-bottom: 10px !important;
}

.zt-content-block .zt-cb-body p:last-child {
    margin-bottom: 0 !important;
}

/* Script body background color */
.zt-content-block.zt-cb-type-script {
    background-color: #d0e9e6 !important;
}

/* Script title background color */
.zt-content-block.zt-cb-type-script > .zt-cb-title {
    background-color: #2f978b !important;
}

/* Script icon */
.zt-content-block.zt-cb-type-script > .zt-cb-title > i:before {
    content: '\f0a1' !important;
}

/* Action body background color */
.zt-content-block.zt-cb-type-action {
    background-color: #c9e7d4 !important;
}

/* Action title background color */
.zt-content-block.zt-cb-type-action > .zt-cb-title {
    background-color: #1c953a !important;
}

/* Action icon */
.zt-content-block.zt-cb-type-action > .zt-cb-title > i:before {
    content: '\f0e7' !important;
}

/* Note body background color */
.zt-content-block.zt-cb-type-note {
    background-color: #dbe1eb !important;
}

/* Note title background color */
.zt-content-block.zt-cb-type-note > .zt-cb-title {
    background-color: #131519 !important;
}

/* Note icon */
.zt-content-block.zt-cb-type-note > .zt-cb-title > i:before {
    content: '\f303' !important;
}

/* Alert body background color */
.zt-content-block.zt-cb-type-alert {
    background-color: #ffe6e6 !important;
}

/* Alert title background color */
.zt-content-block.zt-cb-type-alert > .zt-cb-title {
    background-color: #99121d !important;
}

/* Alert icon */
.zt-content-block.zt-cb-type-alert > .zt-cb-title > i:before {
    content: '\f057' !important;
}

/* Hide configuration buttons */
.zt-content-block .config-buttons {
    display: none !important;
}


/* ACCORDIONS */

/* Width and borders for all accordions */
.zt-accordion {
    position: relative !important;
    display: inline-block !important;
    min-width: 100% !important;
    border-radius: 5px !important;
    border: 1px solid #d9d9d9 !important;
    overflow-wrap: anywhere !important;
}

/* Accordion detail separator */
.zt-accordion details {
    position: relative !important;
    border-bottom: 1px solid #d9d9d9 !important;
}

.zt-accordion details:last-child {
    border-bottom: 0 !important;
}

/* Accordion title area background color and padding */
.zt-accordion details summary {
    cursor: pointer !important;
    position: relative !important;
    padding: 8px 30px 8px 12px !important;
    background-color: #0000000a !important;
    list-style: none !important;
}

/* Accordion title font */
.zt-accordion details summary h3 {
    font-size: var(--font-size) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
}

/* Nested accordion summary styling */
.zt-accordion details summary details > summary {
    list-style: none !important;
}

/* Remove focus outline */
.zt-accordion details summary:focus-visible {
    outline: 0 !important;
}

/* Hide default markers */
.zt-accordion details summary::-webkit-details-marker {
    display: none !important;
}

.zt-accordion details summary::marker {
    display: none !important;
}

/* Accordion toggle icon (default: collapsed) */
.zt-accordion details summary:after {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    content: '\f078' !important;
    display: block !important;
    position: absolute !important;
    font-size: 16px !important;
    right: 12px !important;
    top: 4px !important;
    transition: transform .2s !important;
}

/* Accordion toggle icon (expanded state) */
.zt-accordion details[open] > summary:after {
    transform: rotate(180deg) !important;
}

/* Accordion body container transition */
.zt-accordion details .zt-ac-body-container {
    overflow: hidden !important;
    transition: height .2s ease !important;
}

/* Accordion body padding */
.zt-accordion details .zt-ac-body {
    padding: 8px 12px !important;
}

/* Remove spacing on last paragraph in accordion body */
.zt-accordion details .zt-ac-body p:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

</style>