The left-hand side palette of the Candu editor includes the full set of content and UI components that you can use to build your content. Lets explore all of the different options that you have!
Basics
Blocks
Layouts
Layouts provide an overall structure and foundation for your content.
They can be stacked on top of one another or nested within one another. Depending on the type of layout, different options are available in the Components & Styles toolbox on the right hand-side, where you can adjust how the layout interact with other objects on the page, how text or images are displayed within the layout, and how to apply dependent options, like the number of columns in the column layout.
View
Full-width layout which is often the base layout for a lot of content.
You can nest View layouts within each other
View layouts have a 'Wrap down' version which is useful for creating responsive content
Columns
By default, the two columns layout provided will be of equal width but the height will expand with the content is added
Create up to 12 columns - you can use the Toolbox on the right to add more columns and adjust the proportions of each column. You can also adjust the space between each column too!
We recommend using View layouts when creating content for mobile or very small screens
Typography
All of the typography options that appear here, will pull through from your Styleguide. You can add as many text options as you need.
If you would like to change your fonts, colors, and other style selections, then use the StyleGuide. In this way, you can adjust how all of your content looks at once without editing multiple pages.
Simply drag-and-drop your chosen option from the right-hand palette, or you can update the option you have selected at any time using the toolbox dropdown. You can also override the color and size of your typography components in the editor.
Headers: Header 1 (H1) is the largest available header and Header 4 (H4) is the smallest available header.
Paragraph: Basic paragraph text, with bold, italic, underline, link, un-link, and
code snippet. These options appear when you highlight text.
Once text has been drag and dropped onto the editor you can add:
Bulleted List: Auto-indented bullets. To create a bulleted list, drag the text option you would like onto the page, type * at the beginning of the line, and then begin typing the list.
Numbered List: Auto-indented list that adds the next number each time that you hit Enter. To create a numbered list, begin by typing "1." at the beginning of the line, and then type your list.
Links: To add an in-line link, highlight the text you want to link, select the link icon from the options, and then paste the link. You can also link to other content you've built in Candu. To do this, start typing the name of the content and click the name when it appears below.
B/I/U: Similar to links, if you want to add special formatting to your text, you can simply highlight the text and select an option from the menu that appears or use the usual keyboard shortcuts.
Buttons
All of your button options will pull through from your Styleguide where you can add as many variations as you need. You can add a number of interactions to buttons to direct users to other places or drive them to take a key action.
You can set the border, background, text type, hover/idle/clicked state in the Styleguide to create buttons that match your brand
You can adjust the size, color, and shape (amend the border radius) of the button using the toolbox on the right-hand side
Interactions
You can set the call-to-action using the Interactions tab, also in the toolbox. For any interaction you can add a label that will identify the action which is used for tracking click events in your Content Analytics. The options are to:
Open a URL: which will send users to another page (open in a new tab or not)
Send Email: which will open a mail client
Callbacks: if you're looking to do something more advanced, you can add JavaScript snippets in the installation and call them from the Editor. An example of this is triggering a chat widget to open when a 'Start chat' button is clicked.
Trigger an overlay: You can trigger a Candu Overlay from a Candu button - you will need to link to the overlay content you have created - guide here.
Go to a Flow Step: If you are building a Flow, you can make a button click take a user to another step in your Flow
Change Content: Please use Flows for creating dynamic content that changes or multi-step flows.
Launch Pendo Guide: if you want to link users to a specific product tour within your product, you can simply add the ID of your Pendo guide and trigger from a Candu CTA
Media
Images
You can upload images of any size and type into Candu.
Drag the image option onto the editor and you can then either embed the image via a link or upload it from your computer into the media library.
Once uploaded, you can resize images with the drag handlers or toolbox. When resizing, you can either use pixel size (px) or percentage (%).
If you only fill in width or height, the image will maintain its original aspect ratio; if you fill in both width and height, the original aspect ratio will be overridden. If the size entered is larger than the portal that the image will appear in, the image may not be displayed.
Videos
You can embed videos in Candu so that your users can watch your content within your application rather than having to navigate to an external site.
Drag the video option onto the Editor and then you'll be able to input a video link using your preferred hosting service like Youtube, Vimeo or Wistia.
Please note, some hosting services like Loom will need to be embedded via the iFrame component instead.
Embeds
Embeds allows you to nest third party content such as surveys or bookings in your content or embed existing Candu content that you have already created, within another Candu content.
iFrames: With an iFrame you are able to create content using elements from outside applications like Typeform or Calendly. Drag the iFrame component onto the canvas, and add an iFrame link in. You can control the width, height, and whether the iFrame can show as full screen.
Candu Content: The most common use case for using nested Candu content is for when you want to have two layers of Segmentation. You can track the Candu content component onto the canvas and then select an existing piece of content to display.
For example, in the below dashboard there are already two segments in the content but we want one of the cards to display different content to different users. We add an embed of an integrations card which has 4 different versions/segments on it so that users will see the right integration card.
Alerts, Badges & Dividers
Badges: highlight specific content using a badge. Using the toolbox on the right, select from primary, secondary, tertiary, warning, and danger to set the tone. These colors will all be synced directly to your style guide.
Dividers: These places a line or spacer between content and are useful to break up different sections especially if you are building something with lots of different components.
Alerts: use these to draw users' attention to important pieces of information. Alerts are static on the page and can be customized in your Styleguide so you can call out questions, warnings, etc.
Blocks
Blocks consist of:
Checklist components
Card components
Flow components
A number of pre-built components
You can create as many Checklist and Card types as you like in your Styleguide.
Cards
Cards create a single, full-width card that will keep content inside of it separate from the rest of the page. If you place a card within a layout section, it will fill the layout block.
Cards can have interactions added to them, so they can be calls-to-action.
Cards have an option to be Dismissible, this means users are able to dismiss it. If a user dismisses the card, it will be dismissed permanently for them. You can toggle the dismissible option on and off using the toolbox.
You can style cards and change the border radius, shadow, cursor type, hover state and border to create action cards, transparent cards or static cards.
Checklists
Checklist components allow you to create getting started steps for users to check off manually, or auto complete based on product events or Candu events.
You can create multiple checklist styles in your Styleguide - customize the color, font and box shape/size.
Add section titles, steps, and expandable content blocks to create a dynamic, interactive checklist for your users.
Flows
Flow components can be used to create multi-step onboarding flows, carousels and content switching experiences. You can create as many different steps as you need and connect them with calls-to-action.
To create a Flow you need to drag an empty component onto the canvas and you can then add other content like layouts, cards, images and text. Flows can have as many steps as you need.
Forms
Forms allow you to easily capture data about your users in your existing product without having to use another third party tool. You can build onboarding surveys, feedback surveys or contact forms using a combination of common input field like checkboxes, select lists and text areas.
You can start from scratch with an Empty Form or use one of our templates to get started.
If you are creating from scratch, you need to drag an Empty Form onto the canvas and then you can drag and drop the Form Input fields that you want, into the Empty Form component. Full guide to creating Forms is here.
