Display a message to a user
What you'll build
You will learn how to use a Surface component workflow to display a targeted message, such as a registration prompt or upgrade banner, based on whether a visitor is anonymous or authenticated.
1. Prerequisites
- You will need a Component Workflow in a Surface
2. Add a component
const : = async ({ }) => {
if (. === "anonymous") {
return {
: {
: [
{
: "html",
: `
<div class="banner" style="background: #4F46E5; color: white; padding: 16px; text-align: center;">
<p style="margin: 0;">
Create a free account to unlock more features!
<a href="/register" style="color: white; font-weight: bold; margin-left: 8px;">
Sign Up →
</a>
</p>
</div>
`,
},
],
},
};
}
return {};
};
export default ;Result
Anonymous users see a registration banner at the top of the page HTML. Authenticated users see the page unchanged.