Widget Control Bar


There is two main control bars for the widgets
- Widget origin
- Widget inside the page

Widgets origin

When we list widgets from the Control Panel, we can edit and control how the widget should behave.
In this section we will look into:

- Widget versions
- Editing widget basic title and description
- Adding integration details if exist
- Add widget to your website page(s)
- Updating widget Flow
- Updating widget code base



Widget versions

Widgets can come with one or multiple versions, different versions can specify different integrations, different deisgn system, or anything that requires the creation of a new version to handle the behavior of the widget differently in specific use cases.

We can notice the different versions of the widget when we visit fouita library.

fouita widgets

In the picture above, you can click on the clone icon to clone widget with all its versions, or you can click on the double chevron icon and choose the specific widget that you like to clone.

If you clone a widget with all the versions, you will see it in the project tab widgets (at the top of the picture above)

fouita widgets

You can click on it to see the versions, or you can click on the three dots on top to remove it.
When you click on the widget, you can control which version you want to use inside your page(s).


Editing widget basic title and description

When we double click on the title or description of the widget we can edit its values

fouita widget


Add integration details

For this example we can see the logo of Hubspot, we can click on it to preview the fields required to perform connect Hubspot account with this widget.





Add widget to your website pages

There is two ways to add fouita widgets:
- Add to page
- Add to all page

1. Add to page

You can add the widget to your current page and fouita will automatically detect which page is concerned with that widget.

Note: make sure to add the widget again if you change the url of the page 

fouita widget add to page

When you click on "Add to page" you will be able to drop the widget inside the desired area inside your page.
drop widget fouita

After adding the widget, you can enable the edit mode and start editing the widget inside that page.
You can add as many widgets as you like in that way.

Note: if you update a widget inside a page, it won't affect other pages


2. Add to all pages

Sometimes you would like your widget to be present in all your website pages that loads fouita.
To do so, you can click on "Add to all pages"

fouita add to all pages


When you add a component to all pages, it will automatically load at the top of your pages, if it's popup it won't affect anything, but if it's an inline widget, it will be shown at the top of all the pages that includes fouita.

You can remove the widget from all pages by clicking on "Remove from all pages"

remove from all pages fouita


Note: if you edit the component details inside the page, it will be updated in all pages


Updating widget Flow

Flow is used to control when the widget should be displayed or hidden for the visitors.
By default the widget is shown when the user enter the page, but you can update that to match the desired behavior. Some examples would be.

- Show widget when user scrolls to the end of page
- Show widget when user try to leave the page
- Show widget for only 5seconds
- Hide widget when user start scrolling
- Show widget only if user comes from certain region (Timezone related to cover more regions)
- Hide widget if user comes from certain UTM campaign


widget fouita



Will see more about how to control the widget flow in the next section.


Updating widget code base

If you can code you can edit the widget code base by clicking on the pencil icon. The details on how the code works and can be edited are in the developer guide.
Read more about widget code editor




Widget inside the page

This where we update the widget inside a specific page:
- Update widget location inside the page
- Update classes for better positionning
- Update widget stories for that page
- Update widget origin version used
- Update widget origin widget flow

Note: if you have added the widget to all pages, changes will be applied to all the pages, otherwise, only the widget concerned will be updated.

The control bar
This can be found in two ways:

1 - When we display the list of current page widgets
2- When we enable edit mode

1 - When we display the list of page widgets
From the left sidebar click on current page widgets


fouita widgets


You will notice the widget control bar, that enable us to update and control the positionning of a widget inside the page.

2 - When we enable edit mode

fouita widgets

This is the same control bar accessed when we hover over the element inside the page when edit mode is enabled.


fouita ctrl bar




https://img.fouita.com/0x2729/media/imgs/logoblanc-1633435942147.png?/rs:fit:130:130
The missing pieces of your website.
kairouan, tunisia
built using fouita!