In this lesson, you will learn and implement the first part of the workflow that includes the double opt-in subscription capture strategy for your newsletter.
Double opt-in is the optimal subscription model for your email lists, helping you maintain a solid and clean database. With Connectif, you can create a contact capture workflow with double subscription confirmation to increase and improve your email lists using a single strategy.
Objective: Capture.
Elements used: Popup, form in web content.
Implementation time: < 1 hour.
We recommend following all the steps and implementing this strategy from scratch in your account. However, if you need a quick route, the Workflow Template Directory offers the template Newsletter Subscription with Double Opt-in, which you can use.
Lesson Summary
In this lesson you will learn:
- The "Start" node to configure audiences.
- The "On page visit" node to detect contact visits.
- The "Check value" node to split the flow based on contact information.
- The "Send web content" node to engage contacts with different formats.
- The "On open web content" node to detect which contacts interact with your content.
- The node limitations to restrict their activation.
- How to create a popup in Connectif using the web content editor.
- How to add a form to web content, in this case, to the popup.
This lesson is the most important in the entire course, as you will learn how the Workflow Editor and node interface work. This information will serve as the foundation for all strategies you develop with Connectif.
By the end of the lesson, you will have created in your account:
A part of the capture strategy contained in this workflow, through which you will send a popup with a signup form to contacts who visit your site and are not subscribed to your newsletter.
Strategy Configuration
STEP 0. Creating the Workflow
How the Workflow Editor Works
The workflow editor is a Connectif feature that allows you to create and edit workflows to build different strategies to improve your business results.
You can access the Workflow Editor from Workflows by clicking on Create new workflow.
The workflow editor interface consists of 3 blocks:
1. Start, options, and errors: to start the workflow, save or discard changes, as well as export or delete it. It also includes the following options:
Show error report: to display errors that must be resolved before starting the workflow, if any.
Add notes: to add notes to workflows.
2. Design panel: to visually build the workflow using available nodes. The "Start" node will always appear here, as it is the starting point of all flows and where you configure the workflow audience.
3. Design panel tools: to work with workflow elements and modify the panel's view. It includes the following options:
- Cut mode: to select and remove connections between nodes by holding the left mouse button.
- Select mode: to select an area by holding the left mouse button and dragging.
- Board display options: to modify the design panel's display. This menu also lets you use Delete All to remove all nodes.
- Display controls: to zoom in or out, center the view, and adjust workflow visualization.
4. Node selection menu: to browse different available nodes and configure workflows by dragging them onto the design panel. The types of nodes you will find are:
Trigger nodes: used to reactivate the flow when a contact performs an activity on your site or meets certain conditions.
Condition nodes: used to filter contacts to segment workflow actions more precisely. When a user reaches a condition node, it checks if they meet the requirements to direct their flow.
Action nodes: used to execute specific operations within flows. When a user reaches an action node, its activity starts.
How Connectif Nodes Work
Nodes function as stages in the flow a contact follows throughout the workflow. To continue, the contact must perform an event, meet a condition, or be impacted by an action, depending on the node type.
Each Connectif node has an interface to configure its activity, limitations, and to view data imported and exported by the node:
1. Configuration: to set what triggers the node (for Trigger nodes), conditions contacts must meet to continue (for Condition nodes), or what actions contacts perform upon arrival (for Action nodes). Each node has its own configuration options; the example below shows the "On page visit" node configuration.
2. Limitations: to restrict node activity and set conditions under which it will not operate, except for Condition nodes which have no limitations as they function as filters. Limitations can pause nodes temporarily or permanently. If multiple limitations are combined, the most restrictive takes precedence.
Existing limitations include:
- Deactivate after firing: node deactivates for a contact after firing once.
- Max times fireable per Contact: node deactivates for a contact after firing a set number of times.
- Temporarily deactivate after event: node temporarily deactivates for a contact and reactivates after the specified time.
- Total max times fireable / Total limit: node deactivates after firing a set number of times across all contacts, regardless of individual contact counts.
3. Data: to review information imported and exported within each node throughout the flow.
How to Create the Workflow for This Strategy
1. In your Connectif account, click "Workflows > Create new Workflow" and then select Create Blank Workflow.
2. Click (Edit) and name it "Double Opt-in Subscription".
3. Click Apply to save the new workflow name.
STEP 1. "Start" Node
How the "Start" Node Works
The "Start" node is used to define the contacts targeted by the strategies, so this node is present in all workflows and is the starting point for all flows.
Its interface lets you configure the audiences the strategy will impact, as well as data sources—that is, whether it activates for existing contacts, new contacts entering after workflow activation, or both.
How to Configure the "Start" Node for This Strategy
(This node will set the audience targeted by the workflow).
4. Click (Edit node configuration) on the “Start” node.
5. Under Select a restriction, check "My entire list".
6. Under Select data source, check "All existing and new".
7. Click Update.
At this step, we instructed Connectif to activate the workflow for all contacts visiting the website, both new and existing.
STEP 2. "On Page Visit" Node
How the "On Page Visit" Node Works
This node reacts the moment a contact visits a page on the website.
The node interface configures which pages and devices will trigger it, as well as exclusions.
How to Configure the "On Page Visit" Node for This Strategy
(This node will detect contacts visiting the website).
8. In the node selection menu, go to "Triggers > Web" and drag the "On page visit" node into the editor, connecting it to the "Start" node.
9. Click (Edit node configuration) on the “On page visit” node.
10. In the Limitations tab, uncheck "Deactivate after firing". No additional limitations are added here because a temporary external limitation will be created later from the "On open web content" node to temporarily deactivate this path.
11. Click Update.
At this step, we instructed Connectif that when a contact visits any page on the website from any device, they move to the next action.
STEP 3. "Check Value" Node
How the "Check Value" Node Works
This node checks the value of data imported by previous nodes and filters the contact’s path based on that data.
The node interface configures which data to check and the match criteria, serving as a condition to distribute contacts.
How to Configure the "Check Value" Node for This Strategy
(This node will identify if the contact is subscribed to the newsletter).
12. In the node selection menu, go to "Conditions > System" and drag the "Check value" node into the editor, connecting it to the "On page visit" node.
13. Click (Edit node configuration) on the “Check value” node.
14. Drag the field "Newsletter subscription status" from "Contact" to the left block. This tells Connectif to check the Newsletter subscription status in the contact record.
15. Then, under "Operator", select "Is equal to".
16. Drag the value "Literal" to the right block and select "Subscribed". This means the newsletter status in the contact record must be exactly Subscribed.
17. Click Update.
At this step, we instructed Connectif to check if visitors have the newsletter subscription field set to "Subscribed" in their contact record. If not subscribed, the flow continues and the subscription popup is sent. If subscribed, the strategy stops.
STEP 4. "Send Web Content" Node
How the "Send Web Content" Node Works
This node displays a specific web content format available in Connectif (Popup, Inline, Full Screen, Slide In, or Floating Bar) to contacts reaching this part of the workflow.
The node interface lets you configure which content to show and how, allowing you to choose existing content or create new content.
How Popup Web Content Works
Popup web content appears as a window overlay partially covering the page in any screen position. It draws attention to a specific aspect at a given moment, prompting contact interaction.
It is designed in the Content Editor, so programming knowledge is not required.
A popup generates statistics related to views, interactions, and purchase process participation.
How to Create the Popup for This Strategy
(In this step, you will create the popup to capture newsletter subscribers, which the node will send).
18. In the node selection menu, go to "Actions > Web" and drag the "Send web content" node into the editor, connecting it to the "Check value" node.
19. On the connection between this node and the "Check value" node, click the circle until "No" appears. This tells Connectif to show the popup to visitors who do not have Subscribed in their Newsletter subscription status field in their contact record.
20. Click (Edit node configuration) and then Create new content to generate new content.
21. When creating new content, select Popup as the type, assign a name, and click Create new content.
22. In the Tools panel, click the General tab to edit general popup appearance settings. You can also access this by clicking General properties in the design panel. Key options include:
- Name: to identify your popup.
- Layout: to determine screen position.
- Animations: to define show and close effects.
- Content background and Background layer: to choose colors and effects.
- Close button: to configure its display.
23. Click the Components tab to access popup design and construction options.
- In Layout, choose the distribution that best fits your needs. If none is included, a single-column structure is used by default.
- In Elements, add a text field to insert your form. You can also add other elements such as "Text", "Image", "Link button", "Divider", "Space", "Products", "HTML", "WhatsApp", "Video", and "Countdown". Edit components to configure design and text.
- In Form elements:
- Add a text field named "Name" to collect the contact's name. Edit it to configure design and text.
- Add an email field to collect the email address and mark it as required under Validations. Edit it to configure design and text.
- Add a checkbox to accept the Privacy Policy, click Validations, and require at least one option to be checked, making acceptance mandatory.
- Add the form submit button and edit it to configure design and text.
24. In the Form tab, configure submission parameters:
- Select Signup as the Form type so contacts who complete the form are registered and identified with the user performing the action. Choosing Event would keep the info in the workflow but not register it in the contact record or associate the visit with an email.
- Select the Email field added previously as the Identifier email to update this data in the contact record.
- Check Close content on submit so the popup closes when the contact submits the form.
- Do not check Subscribe contact to newsletter on form submission because subscription confirmation will be handled by the contact via email configured in the next lesson.
25. Click Save to keep design changes and then Return to selector to finish node configuration.
How to Configure the "Send Web Content" Node for This Strategy
(This node will show the popup you just created to contacts not subscribed to the newsletter when they visit the website).
26. Select the popup you created and click Next .
27. Choose when the popup will display. Here, select “After a few seconds” and set "5" seconds under “Show after” to display the content after the contact has browsed the page for that time. You can also choose to show it immediately, just before page exit, when the contact scrolls to a certain point, or after inactivity.
28. Click Next then, in the Limitations tab, uncheck "Limit per contact" so the content can show multiple times to contacts if they continue to meet the criteria.
29. Click Finish .
At this step, we instructed Connectif to send the popup with the subscription form we created to visitors reaching this workflow stage. The popup is configured so contacts must interact with it either by closing it or submitting the form.
STEP 5. "On Open Web Content" Node
How the "On Open Web Content" Node Works
This node reacts when any sent web content is displayed (as shown in the image), except inline content which is embedded on the page and not considered a popup.
The node interface lets you set whether it triggers with a specific content or any content of a certain type.
How to Configure the "On Open Web Content" Node for This Strategy
(This node detects when the popup is shown, allowing you to add limitations to prevent it from showing again during browsing).
30. In the node selection menu, go to "Triggers > Web" and drag the "On open web content" node into the editor, connecting it to the "Send web content" node.
31. Click (Edit node configuration) on the “On open web content” node.
32. Click A specific content.
33. Select the "Popup" content you configured in the previous node.
34. In Limitations, uncheck "Deactivate after firing".
35. Create an external limitation in Limitations on other nodes by:
In the Select node dropdown, choose "On visiting any page" to limit this node.
Under Select limitation type, choose "Deactivate for a time" and enter “1” in the “Day” field.
Click Add external limitation to save it. This limits the “On page visit” node (step 2) so if a contact opens the popup but does not subscribe, it won’t show again for one day even if they revisit the site.
36. Click Update.
At this step, we instructed Connectif that once the subscription popup is shown, if the visitor does not submit the form, this branch will not restart for one day.
Result
After completing these steps, you will have established the first part of this strategy, which displays a popup on your website inviting visitors to subscribe to your newsletter. Remember, this is just the first part of the strategy, so we recommend continuing the course to complete it.
Continue Your Journey
Now that you have completed this lesson, continue configuring this strategy in your account with the steps in the next article.
Congratulations!
You have reached the end of the lesson.
Return to the course
Access the full course index and lesson explanations at this link.
Related Readings
If you want to deepen your understanding of any topics covered in this lesson, you can access the guide documentation:
- "Start" Node, to learn about audience configuration options in your workflows.
- Types of Web Content in Connectif, to discover, besides popups, what other formats you can create and integrate directly into your website from Connectif.
- Web Content Editor, to explore how to create your web content.