In this tutorial, we’ll guide you through the process of displaying a user’s name and email in your app. Follow these detailed steps to enhance your app's user experience. If you prefer video tutorials, you can also watch the video version of this tutorial on YouTube.

First, open your preferred web browser and navigate to Powerful.so. Once you’re on the Powerful homepage, look for the Download tab in the navigation menu and click on it to access the downloadable resources. In the download section, you’ll find various templates. Locate the specific Framer template that includes the user name and email functionality. Click on the template to open it and then select the option to remix the template. Copy the entire template code to your clipboard, open your project in Framer, and paste the copied template code. By remixing the template, you will ensure that you have the correct structure and components needed to display user information.

Before you can proceed, make sure that your website is live and all the content is up to date. This step is crucial as you will need the live link for the next steps. In your web browser, navigate to your live website and copy the URL from the address bar to your clipboard. This link will be used to link your project in Powerful.

Return to Powerful.so and log in to your account. From your dashboard, access the Admin Panel. Click on the “Create New Project” button and fill in the necessary details for your project, such as the project name and description. Once you have filled in the details, click on the “Save Project” button to create your new project. In your new project, go to the Frame Section. This is where you will configure the frames that will display the user’s name and email. Click on the “Add New Frame” button and in the frame settings, you will see an option to paste a URL. Paste the live link of your website that you copied earlier into the URL field.

To ensure that only logged-in users can see their names and emails, find the Visibility Options in the frame settings. Choose the option that says “Visibility only” and under this option, select “Anyone who is logged in”. Note that you don’t need to set this visibility option for all frames. If one frame has this flag set, the user’s name and email will appear in every text field that was included in the remixed template. After configuring the frame settings, click the “Save” button to save your frame settings and wait for a confirmation message indicating that your settings have been saved successfully.

In the admin panel, you will see an option to generate a QR code for your project. Use your mobile device to scan the QR code, and once scanned, your app will open in preview mode, allowing you to see how the user name and email are displayed. Congratulations! You have successfully configured your app to display the user’s name and email. By following these steps, you’ve enhanced the personalization of your app, creating a more engaging experience for your users. If you have any questions or encounter any issues, feel free to reach out to our support team.