User Profile Widget
The User Profile widget shows a button that leads to the user's profile when signed in — or a sign-in button with custom text when the user is not signed in. Use it to give the user a clear entry point to their profile and to sign in.
When to use this
- You need a profile button in the header or a side menu
- You want a clear sign-in button for signed-out visitors
- You want to combine signed-in and signed-out states in the same button
How it works
The widget switches automatically based on the sign-in state. When the user is signed in, a button leading to their profile is shown; when the user is signed out, a sign-in button with your text is shown. You control the button's appearance with two toggles — full width and rounded corners.
Add a user profile widget
- Open the Design editor for your applet.
- Add the User Profile widget to the page.
- Open the widget settings.
- Adjust the button shape with Full width and Rounded corners.
- Enter the text shown when the user is not signed in.
Widget settings
Button
| Setting | Description |
|---|---|
| Full width | Fills the widget's full width. When off, the button is shown in its default width. |
| Rounded corners | Rounds the button's corners. Only available when Full width is on. |
Text
| Setting | Description |
|---|---|
| Text when not logged in | The text shown on the sign-in button for signed-out visitors. If left empty, the system's default text is used. |
Example
Scenario: You want a clear sign-in button on the home page that switches to a profile button once the user is signed in.
- Add a User Profile widget to the home page.
- Turn on Full width and Rounded corners.
- Set Text when not logged in to
Sign in to see your content.
Signed-out visitors now see a wide, prominent sign-in button. Signed-in users see a button that takes them to their profile instead.
Tips
TIP
Place the widget in the app's shared layout if the profile button should be available on every page. Users can then always navigate to their profile.
TIP
Write an active sign-in text (Sign in to …) rather than a passive one (Not signed in). Active text leads to higher engagement.
Common mistakes
WARNING
Rounded corners only takes effect when Full width is on. To get a compact rounded button, switching on rounding alone is not enough — the button also needs full width.