Web Content Editor

Our highly responsive and visual web content editor allows you to design informative and interactive content to display to your contacts. Using web content in your workflows allows you to establish direct communication with the customer and create a personalized experience for them.

 

How to access it

You can access the web content editor through two routes:

1. From “Content > Web”. Click  Create new web content to generate new content, or click More   and select Edit to modify existing web content.

2. From the "Send web content" node in a workflow, by clicking  (Edit node settings). You can click  Create new email to generate new content or   Edit to modify existing web content.

 

Interface

The web content editor is composed of three blocks:

1. Preview and save: to save or discard the changes you’ve made. You can also preview the final result of the content that will be inserted in your ecommerce site or review its HTML version.

2. Design: to visually build the email using the structures and components of panel 3 (tools).

3. Toolbox: to configure all content properties and make use of layout components. This panel can be collapsed or expanded by clicking  (Open tools) or  (Close tools).

 

How it works

The web content editor has a drag-and-drop design to give you a quick, easy and very visual way to design your content.

 

1. Edit general style

In the Toolbox (3), panel, click on the General tab to edit the parameters of the overall look. You can also access it by clicking   General properties on the design panel (2).

The common parameters to be defined are:

• Name: name you want to give the content to identify it in your Connectif account.

• Tags: catalog your email and locate it quickly by clicking   Enter tags and adding key words that will help you identify it.

• Borders: color, thickness and style of your content's border.
• Background: color and image effects for the background layer of your content.
• Shadow: color and shading effects of the structure that will display your content.
• Z Index: numerical value indicating the order of overlapping layers.
• Responsive: responsive design threshold (up to what screen width will be understood as a mobile device).

 

2. Build a web content by blocks

In the Toolbox (3) panel, click the Components tab to create your composition by dragging and dropping structures or elements in the design panel (2).

 

Structure

Distribution that a block of elements will adopt within the web content design set. Can be presented in one or more columns, with different or identical proportions.

The structure must be defined first. If none is included, the single column structure will be used by default.

Once a block of elements is created, position the mouse over it and click  (Edit block) to modify it,  (Duplicate block) to create an identical one or  (Delete block) to delete it.

 

Elements

Elements are the basic pieces of functional content from which to build your web content design, by dragging them to the blocks created in the design panel (2). Like the structure, you can edit them by hovering the mouse over the element and clicking  (Edit element) or over the content itself. You can also duplicate them by clicking  (Duplicate element), or remove them by clicking  (Delete element).

 

The available elements are:

• "Text"
  Edit your text by applying rich text format (bold, italics, links, etc.), inserting dynamic variables or modifying its layout in the inserted block.

• "Image"
  If your image is already published on the internet, paste the image URL to include it in the web content. If you prefer to upload it from your device, click   Upload image or (   ), and select the file in the pop-up browser. Once uploaded, the image URL will automatically be completed.
  
  As additional settings, you can also assign a link to the image, adjust its position within the block that contains it or change the background color. Optionally, you can set the Alternate text (which will appear if the image doesn’t load) and the Title text (the text that is displayed when you position the mouse over the image, also known as the alt attribute).

• "Button link"
  Define the text that appears on your button, the title attribute and the link (can be a single specific link or a predefined one to carry out a particular action). To configure its appearance, select text and background colors, customize the borders and corners, and adjust their position within the block.

• "Divider"
  Configure the color and layout of the vertical line that separates content visually.

• "Broke"
  Define the amount of white space you want to insert between two blocks. By default this block is transparent, but you can set a color if necessary for your design.

• "Products"
  Insert a carousel of products that will be filled with items of interest for the contact. You can select one of the three default templates (Product with rating, Product with brand or Product with price) or customize the final look in the text editor. You can also define its row and column structure according to the device.

• "HTML"
  Embed custom HTML code and adjust its layout.

• "WhatsApp"
  Add a button for users to contact you or share the page they are visiting on WhatsApp. Define the text that will appear on your button, the 'title' attribute, the type of action and the default message that will be sent. To configure its appearance, select text and background colors, customize the borders and corners, and adjust their position within the block.

• "Video"
  Paste the URL of the YouTube or Vimeo video you want to show in your content and set its playback options. If valid, the video cover will be displayed in the design panel (2). You can configure the appearance by adjusting the layout of the video or changing the color of the background.

• "Countdown"
  Configure the countdown clock by setting an end date and its format. Customize the font, size, and color of digits and tags, whose text you can modify. Select a background color and adjust the counter layout.

 

Form elements

Form elements collect contact information from your web content, allowing you to capture leads, run questionnaires, surveys, etc.

The available form elements, according to the type of data they collect, are:

• "Text": for one or more words, all characters are valid.
• "Number": for any numeric value with or without decimals.
• "Date": for a date in day, month and year format, internally compatible with ISO 8601.
• "Email": for a valid email address.
• "Multiline": for several lines of text.
• "Radio": to display a list with a series of options from which only one can be selected.
• "Selection": to display a drop-down with a series of options from which only one can be selected.
• "Checkbox": to display a list with a series of options from which one or more can be selected.
• "Send button": It allows the contact to send the form and collect its data in Connectif.

 

3. Create and use existing custom templates

Under Custom templates in the tool block (3), click   Create template to save the design you've created as a template. Select the block or blocks that will be part of the template then in the preview and saved bar (1) click  Create template.

In the pop-up window, assign a name and tags to the custom component and click   Save.

You can also design your web content quickly in the Toolbox panel (3) by dragging the custom components you’ve created from the Custom templates section of the Components.

 

4. Review variables

Variables are elements that allow you to customize your content. Check the variables created and how many times they appear in the text elements using the Toolbox (3), panel, on the Variablestab. To edit its format, click  .

 

5. Preview final result and save

You can see the final result of your web content in the preview and save panel (1).

All the content created is responsive, so you can click  Preview to check the final result. Click  (Desktop view) to see the result on desktop, or  (Mobile view) pfor mobile devices.

Once you’ve got the right design, click   Save to save your changes to your web content.

 

 

 

---

Keep learning!

To make the most of your Connectif account, we recommend reading these articles next:

• Create a personalized product block in email or web content, to tell clients about products they’re interested in.

• Show personalized products in content,, to show personalized products to each contact using dynamic content and a workflow.
• Show percentage discount only when there is a discount in web content, to highlight discounted prices and their percentage discount in content.

• Home page recommender, to show products that your contacts have visited on the home page.