How can we help?

Showing personalized fieldsYou may want to add some personalization to a page such as greeting someone by their provided name. Learn more about our override library below, or delve deeper into our SDK.

1. In your framer site, open the Assets tab in the left hand menu. Click the + icon next to the code section and create an override.

2. Open your new override in the code editor, and replace the existing override with the code provided below and save.

Copy: import type { ComponentType } from "react"; import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"; import { fetchUserData } from "https://framer.com/m/ThentyHelpers-I0Oh.js"; import { thentyAuth } from "https://cdn.thenty.io/beta/thenty-sdk.min.js"; export const withLogout = (Component): ComponentType => (props) => <Component {...props} onClick={() => { thentyAuth.logout() }} />; export const showWhenLoggedIn = (Component): ComponentType => (props) => { const { loggedIn } = fetchUserData(); return !loggedIn ? null : <Component {...props} />; }; export const hideWhenLoggedIn = (Component): ComponentType => (props) => { const { loggedIn } = fetchUserData(); return loggedIn ? null : <Component {...props} />; }; export const withFirstName = (Component): ComponentType => (props) => { const { loggedIn, userData } = fetchUserData(); return !loggedIn || !userData ? null : <Component {...props} text={userData?.name?.split(" ")[0] ?? ""} />; }; export const withFullName = (Component): ComponentType => (props) => { const { loggedIn, userData } = fetchUserData(); return !loggedIn || !userData ? null : <Component {...props} text={userData?.name} />; }; export const withEmail = (Component): ComponentType => (props) => { const { loggedIn, userData } = fetchUserData(); return !loggedIn || !userData ? null : <Component {...props} text={userData?.email} />; };

3. Create a frame that simply has any placehodler text inside it, we like to wrap our text in square brackets so that we can see its a dynamic field in the editor

Select an override on this placeholder text's frame. We currently have the following text fields available

withFirstName - Replaces field with a user's first name

withFullName - Replaces field with a user's full name

withEmail - Replaces field with a user's email

If you have custom fields that you want to show on your page, you can use the fetchUserData function from the SDK to create your own override function that passes through your custom attribute's identifier.

For example:

import { fetchUserData } from "https://framer.com/m/ThentyHelpers-I0Oh.js";
2	
3export const withEmail = (Component): ComponentType =>
4    (props) => {
5        const { loggedIn, userData } = fetchUserData()
6        return !loggedIn || !userData ? null : (
7            <Component {...props} text={userData?['custom:dateOfBirth']} />
8        )
9    }

More customizations:

• Log out button

• Update user component