Este artigo está atualmente disponível em inglês e espanhol. Você pode usar esta documentação enquanto ela não estiver disponível em seu idioma.
A Floating Bar is a type of web content that appears at the top or bottom of your page, spanning the entire width. Additionally, this bar remains fixed while users navigate the page.
In this article, you will learn how to create a Floating Bar and insert it into your website with Connectif.
Implementation time: 15 min.
Difficulty: Low.
When to use it?: When you want to highlight important information without interrupting the user's navigation.
STEP 1: Creating the Floating Bar web content
1. Go to your Connectif Store.
2. Go to "Content > Web content" and click Create new content.
3. Select the Floating Bar content type and assign it a name.
4. In the General tab, adjust the background color and select the position of the floating bar (top or bottom of the page).
5. In the Components tab, add and edit the components you want. For example, add a Text component to add a message to your Floating Bar.
6. (Optional). Add a link to the text by clicking the Insert link button. You can also add other elements, such as variables, if desired.
In our example, we will add a link to the offers page.
7. Adjust the text design options such as color, typography, margins, etc.
8. Click Save to save the changes to the Floating Bar design.
STEP 2: Creating the workflow to display the Floating Bar
9. Go to the Workflows section and click Create new workflow.
10. Select Create blank workflow.
11. Edit the "Start" node to trigger for your entire contact list, both existing and new, as shown in the image.
12. Add a trigger node "On page visit" and edit it to choose on which pages the Floating Bar will appear.
In our example, the Floating Bar will appear on all pages of the website.
13. Add an action node "Send web content" and select your Floating Bar. Click Next .
14. Configure when the web content will be shown to the contact visiting your page. For example, "After a few seconds", to display it 5 seconds after a contact arrives on your site. Click Next .
15. Keep the default node limitation active so that the Floating Bar is shown only once per contact, as shown in the image.
16. Click Apply to save the node settings.
17. Save your workflow and activate it to determine when it should start and, optionally, when you want it to stop, so the Floating Bar will no longer be displayed.
In our example, the workflow will start automatically and stop after 7 days.
Success!
Your Floating Bar is integrated into your website.
Keep learning!
To make the most of your Connectif account, we recommend continuing with the following articles:
- Types of web content in Connectif, to learn about the different formats you can create and integrate into your site.
- Web content editor, to delve into how to create your web content.
- Detect and react to web links created outside Connectif, to identify and respond to clicks on any link on your site.
- Embedded forms, to detect and collect existing forms on your site in Connectif.