Web Content Editor


Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.

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.


There are five types of web content in Connectif: popupfull screenslide infloating bar e inline. If you want to find out about their different characteristics, click on each name to find an in-depth article.


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.


When creating new web content, select the type and give it a name to distinguish it.


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.




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).


While there are a number of common parameters, the general properties can be set up with different customizable attributes depending on the type of web content you're designing. Remember that the links above will direct you to the documentation for each of them.

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.

Tags are very useful for finding your workflows faster and grouping them according to their characteristics and purpose. We recommend adding tags that include:
— Campaign name.
— Date on which it will be launched.
— Target audience.
— Campaign objective (sales, loyalty, capture, etc.).

For example, using the labels "Spring Sales", "Customers who have purchased" and "Lead capture".

  • 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).



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.





Unlike general properties, elements can be used to design all types of web content.

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.



Dynamic variables allow you to personalize your text according to the data gathered in each contact’s profile. To learn more about variables and improve the performance of your web content, we recommend reading the article What are variables and how to use them.


The     (Convert to HTML) button in this and future elements will convert the text element to HTML, which cannot be reversed. To use this function, you’ll need basic knowledge of HTML and CSS. If you can’t find an expert to help you, we recommend not converting the text.

  • "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.


In order for the product carousel to display the items the contact is interested in, it’s essential to use a “Get products” node before the “Send web content”. node. You can learn more in the articles Show personalized products in content and "Get products" node.


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


To insert this element, you’ll need an expert in layout, CSS and HTML design to ensure that content is correctly displayed.


  • "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.


If you’re going to create a form in your web content, we recommend reading the article Forms in web content.

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.

When the contact clicks this button, a "Web form submitted" event is generated, which can be reacted to in a workflow through the "On Form Submitted".



If you want to learn more about the types of data you can gather from contacts, click here.


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.



Custom components can be used as a template in any type of web content, regardless of the original content from which they were created.

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


If you haven’t used variables in your web content, you can skip this section.

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  .



Learn more about the variables format by clicking here.


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 in mind that the styles applied to your ecommerce site can affect how web content is displayed. Review the settings that are inherited from global CSS rules if the visual behavior of Connectif elements on your website differs from that obtained in the Content editor.




You’ve reached the end of the tutorial.


Do you have questions?
Don’t forget, our Connectif specialists are here to help you. To contact them, just open a Support ticket by clicking the blue “Help” button on your dashboard.


Keep learning!

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


Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 0 su 0