How to show the signed-in user's name, photo and details

In TeleportHQ, you show details of the member who is signed in to your web app with the Account elements: Name, Email, Image, Menu, Sign Out, Form and Delete Account. You find them in the left sidebar under Elements → Primitives → Account. You can also bind any text or image to Current User, for example to write "Hi, Maria". In an online store or a site that takes bookings, each customer also has a My account page that keeps their contact details and address.

Before you start#

• Authentication must be turned on. Until then, the Account group shows "Authentication Required" with an Enable Authentication button. See How to add sign-up and login to your site.
• Create a test user so you can preview real details. See How to manage your site's users and roles.

Steps#

Add a ready-made account element#

1. In the left sidebar, click Elements, then open the Primitives tab.
2. Scroll to the Account group.
3. Click an element to add it to your page, for example Name. You can also drag it to a place, for example into your navigation bar.

When a member deletes their account with Delete Account, your TeleportHQ site also clears their email address on gift cards they bought or were sent (the cards keep working with their code), the account and IP address on their download records, their email address on your site's activity log, and the copies of the emails your site sent them. Invoices already issued keep the buyer's name and address, because an invoice has to name its buyer. It's the same as removing them in the editor: see Remove a user.

Bind your own text to the signed-in user#

Use this to build a custom greeting, for example "Hi, Maria".

1. Select a text element on the canvas.
2. In the right panel, click the plug (link) icon next to the content.
3. In the binding panel, open global, then Current User.
4. Click the field you want, for example the name.
5. Click Bind property.

Check that it worked#

1. Click the padlock button at the top left of the canvas.
2. Choose Act as User and pick your test user.
3. The account elements and bound texts show that user's details. Choose Act as Logged Out to see the guest view.

Add your own profile fields#

To collect extra details, such as a phone number, add a property to your users:

1. Select the account Form element, for example on the my-profile page.
2. In the right panel, find Account Properties.
3. Click Add Property. The Add Account Property window opens.
4. Type in Search properties... and pick a property, for example Phone.
5. The next window lists what will change. Click Add Property to confirm.

TeleportHQ adds the property to your users, a new field to the account form, and saves it with the form's Update Account workflow. The property is then available under Global > Current User for binding.

The customer's account page in a store or a booking site#

In a TeleportHQ online store with sign-in, and on a site that takes bookings, the my-profile page is the customer's My account page. Its first tab is Account. The other tabs come from your features:

• The store adds Orders, plus Subscriptions when your store can sell subscriptions (a payment provider that bills them is connected) and Gift cards when gift cards are on.
• Bookings adds Bookings.

Each tab lists the customer's own orders, bookings, subscriptions or gift cards. The line under the My account heading names what the tabs hold, for example "Manage your details, your orders and your bookings."

The Account tab keeps the customer's details:

• Profile photo, with Upload photo ("PNG, JPEG, WebP or GIF · up to 4 MB").
• Personal details: First name, Last name, Display name, Email, Phone and Company. The email can't be changed: "You sign in with this email, so it can't be changed here."
• Address: Address line 1, Address line 2, Country, Town / City, State / Region and Postal code, "Filled in for you at checkout."
• Save changes stores them.

At checkout, a signed-in customer's saved details are filled in for them. When they place an order, the details they typed are saved to their account where it had none: each empty personal field is filled in, and the address is saved if the account had no address yet. See What shoppers see: cart, favorites and checkout.

Connect existing "Log in" and "My account" buttons#

If your design already has sign-in or account buttons, TeleportHQ can connect them to the signed-in user. This only happens while you turn on authentication: switch on Detect sign-in and account info in my Navigation and Footer in the last step. The Connect your site to signed-in users window then lists what it found. Click Connect to signed-in user on each item; the AI Assistant converts it. This uses AI tokens. You can minimize the window to a chip at the bottom of the canvas and open it again from there. The scan can't be started again later. You can ask the AI Assistant instead, for example "Make the Log in button in my navigation show the signed-in user's name".

Troubleshooting#

The Account group says "Authentication Required" Authentication isn't on yet. Click Enable Authentication in that card.

Account Properties says "Enable authentication to manage account form properties." Turn on authentication first.

The name shows "User Name" on the canvas You're previewing as a guest. Choose Act as User in the padlock menu to see a real user's details.

"This photo is larger than 4 MB. Please choose a smaller image." Members see this on your site when their profile photo is too big. Photos can be PNG, JPEG, WebP or GIF, up to 4 MB. Another file type shows "This file can't be used as a profile photo. Please choose a PNG, JPEG, WebP or GIF image."

Good to know#

• To show an element only to signed-in visitors (for example, a Sign Out button), use a condition on User is logged in. See How to show or hide elements based on a condition.
• Removing an account property asks "This action cannot be undone. Are you sure you want to proceed?" before Remove Property.