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.

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 tree's Settings > Code tab. Stay tuned for CSS snippets and examples.