The SignOut Button widget allows users to log out from their accounts. When clicked, it ends the user's session and redirects them to a designated sign-in or home page.
The SignOut Button widget is pre-configured and automatically displayed within the User Account Drawer. You can remove it from the Drawer, if required, and add it on any page based on your specific design considerations.
Adding a SignOut Button Widget
To add a SignOut Button widget:
- Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
- Open the Widgets list on the left panel.
Type the widget name in the search bar, or expand the User Account group to access the SignOut Button widget.
Drag and drop the SignOut Button widget onto the desired area.
Note: You can place it on either the Sign Out system page or any other page you find suitable according to your website UX.
Upon placement, the SignOut Button widget by default appears with the design preset for the Button widget. The widget has specific modes. You can find the Mode dropdown on the widget Property Panel and customize the widget appearance and behavior for each of them.
The Modes of the SignOut Button Widget
Customize the design of the SignOut Button widget for the following modes:
- Normal
- Loading
The loading mode is important for providing feedback to your customers and managing their expectations while the button processes the necessary data for sign-out functionality.
Configuring the SignOut Button Widget
To design the appearance and behavior of the SignOut Button widget, activate the Property Panel of the widget by clicking to access the widget Styles, Content, and Settings.
- Go to widget Styles to configure the general styling features (see Global Styles) to achieve the desired visual and functional outcomes.
- Customize the element-specific stylistic feature General to set its display (Label Only, Left Icon, Right Icon, and Icon Only).
2. Go to the widget Content:
- Add a link to navigate your customers to the required page, for example, the sign-in page or homepage.
- Select the icon to be displayed to your customers: either from General Icons or My Icons, inheriting the Vectors uploaded in the Media section.
- Write the label text to be displayed to your customers.
3. Go to the widget Settings to set its visibility (see Visibility Settings) on the website based on criteria such as your customers' location, session status, device type, browser, language preference, etc., to tailor it to specific user segments or conditions.
Tip:
- You can access the UI Elements in the Design System. To do so, click the bookmark icon in the upper-right corner of the Property Panel. Select one as a base for the widget, or click the plus icon to create a new UI Element and style it according to your preferences.
- Once you have customized each mode, you can use the Dotted Menu to reset or override the widget styles. To do so:
- Click the Dotted Menu in the right corner of the Property Panel.
- Select Reset Styles to discard the changes made to the SignOut Button widget and restore its default style.
- Select Override Styles to apply the changes made to the SignOut Button widget (font, size, alignment, etc.) to the base element and the elements derived from it.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.