Insert menu

Add standard or custom components to your email

To the left of the Visual Editor, you'll find the Insert menu which contains a list of components you can drag/drop onto the canvas. At the top is a list of Standard Components - a library of out-of-the-box elements to help you get started right away. Below that is a list of Custom Components - those you've coded from scratch.

A screenshot of the Parcel window where the visual editor is open. On the left-hand side is the insert menu which contains a list of components you can drag onto the canvas to the right.
The insert menu on the left of the visual editor

You can expand and collapse the menu at the top. You can also resize it by dragging the right border.

A video of the Parcel window. The cursor hovers over the right border of the insert menu then clicks and holds to shrink then widen the size. Next the cursor hovers near the top of the panel and clicks the collapse icon then expands it.
Adjust the size of the insert menu.

Standard components

You can insert any of our standard components through the menu of the visual editor.

A screenshot of the entire Parcel window. On the left-hand insert menu, the top shows a list of ten standard components that you can drag on to the canvas to the right.
Drag standard components from the top of the insert menu onto the canvas.

Images

After you insert an image component, you can drag and drop an image onto the component in the canvas or click Choose to view your Asset library.

A screenshot of the entire Parcel window. In the middle of the screen on the visual editor's canvas is an empty image component. The component reads "Drop your image" followed by a button labeled "Choose."
In the middle of the canvas is a standard image component.

If you click Choose, you'll see a grid view of all images you've uploaded to your workspace. Select one or click Upload file in the top right.

A screenshot of the entire Parcel window. A modal appears in the center of the screen titled "Select Asset." There is a search box below the title in the top left. Under that is a grid view of all images uploaded to the workspace. In the top right is a button labeled "Upload file."
A library of assets you've uploaded to your workspace.

Images must be smaller than 3MB. If you export the email, it will come with a zip file of images.

Tip

If you move an image file into or out of a folder, you will need to manually update the path!

Custom components

You can insert custom components created in your workspace through the menu of the visual editor.

A screenshot of the entire Parcel window. On the left-hand insert menu, the bottom half shows a list of eight custom components that you can drag on to the canvas to the right.
Drag custom components from the insert menu onto the canvas.

If you have a lot, categorize them so that they're easier to find in the insert menu. Above, you can see three categories: Action, Layout, and Presets. To categorize them, add a section to the component's <script> tag. For instance, here's the JavaScript for the custom components titled Primary and Secondary CTA in the image above:

export const config = {
  label: 'CIO CTA',
  presets: [
    {
      icon: 'smart_button',
      section: 'Action',
      label: 'Primary CTA',
      content: '<cio-cta></cio-cta>',
    },
    {
      icon: 'buttons_alt',
      section: 'Action',
      label: 'Secondary CTA',
      content: '<cio-cta variant="secondary"></cio-cta>',
    },
  ],
};
Previous ArticleNext Article