WeWeb is a powerful, no-code web app builder that integrates well with Outseta to provide authentication, billing, and user management capabilities without writing code.
In this guide, you’ll learn how to:
- Add the Outseta script to your WeWeb project.
- Implement sign-up, login, logout, and profile functionality
- Dynamically show and hide page elements with Outseta data attributes.
- Gate access to pages with Outseta’s protected content feature.
It's also possible to combine Outseta with WeWeb auth plugins for native WeWeb access control and conditional rendering:
👉 Combine WeWeb's Token Based Auth Plugin with Outseta
👉 Combine WeWeb's Xano Auth Plugin with Outseta
Prerequisites
- WeWeb project: You have an existing WeWeb project with a couple of pages.
- Outseta account: You have an existing Outseta account with
- at least one plan configured under Billing > Plans and
- your WeWeb live/production url configured as the Auth > Sign up and Login > Post Login URL.
Step 1: Add Outseta to Your WeWeb Project
Add the following code in WeWeb under More > Custom Code > Head.
<script>
var o_options = {
domain: '[your-sudomain].outseta.com',
load: 'auth,customForm,emailList,leadCapture,nocode,profile,support',
monitorDom: true
};
</script>
<script src="https://cdn.outseta.com/outseta.min.js" data-options="o_options"></script>
🔹 Note: Swap out [your-sudomain] with your subdomain found at Auth > Embeds > Quick Start.
🔹 Note: Notice the added monitorDom: true when compared to the standard configuration options at Auth > Embeds > Quick Start.
✅ Test It: Deploy your WeWeb project and visit the deployed site. If you see an error alert stating "[domain] is a required option to initialize the Outseta script", double-check your subdomain and script setup before proceeding.
Sidebar: Data Attributes in WeWeb
Throughout this article, we'll use data attributes, or HTML attributes as WeWeb calls them. When selecting an element, you can manage them in the right panel under the Settings tab. Click "+ Add" to create a new attribute.
Step 2: Set Up Outseta Sign-Up, Login, Profile, and Logout
Outseta provides two ways to display embeds: as popups or as on-page embeds. We recommend starting with popups for simplicity, and do so in this guide.
🔹 Note: The data attribute approach we recommend for WeWeb differs from the generic Quick Start method of using links found at Auth > Embeds > Quick Start.
⬇️ On-page embeds are covered all the way at the bottom of this article
Signup
To enable the Sign-Up popup embed, use the following attributes on a button element:
| Name | Value | Note |
|---|---|---|
| data-o-auth | 1 | or empty |
| data-mode | popup | |
| data-widget-mode | register |
Login
To enable the Login popup embed, use the following attributes on a button element:
| Name | Value (popup) | Note |
|---|---|---|
| data-o-auth | 1 | or empty |
| data-mode | popup | |
| data-widget-mode | login |
Profile
To enable the Profile popup embed, use the following attributes on a button element:
| Name | Value (popup) | Note |
|---|---|---|
| data-o-profile | 1 | or empty |
| data-mode | popup |
Logout
To create a Logout button, use the following attributes on a button element:
| Name | Value | Note |
|---|---|---|
| data-o-logout-link | 1 | or empty |
| data-o-logout-url | /you-are-logged-out | Optional path or url to redirect the user to after being logged out |
💡 Customization Tip: You can style and configure the embeds to match your branding. Check out the Design Showcase in Outseta for inspiration.
✅ Test It: Deploy your WeWeb project and verify that you can sign up, log in, view your profile, and log out. The profile embed will be empty until a user logs in. If something is not working, reach out to Outseta Support before proceeding.
Step 3: Dynamically Show and Hide Elements
Now that you've added the popup buttons, you might notice that your site displays the Profile and Logout buttons before a user logs in and the Sign-up and Login buttons after. Let's fix that with these two data attributes:
| Name | Value | Note |
|---|---|---|
| data-o-authenticated | 1 | The element will only show for authenticated users |
| data-o-anonymous | 1 | The element will only show for anonymous visitors |
Add the data-o-anonymous attribute to the Sign-up and Login buttons and the data-o-authenticated attribute to the Profile and Logout buttons.
💡 Visibility Tip: You may use these visibility attributes, and more, on any element 👉 Dynamically show and hide page elements with data attributes
💡 User Data Tip: You can also pull user data onto the page with data attributes! 👉 Display user data on the page with data attributes
✅ Test It: Log in and out of your WeWeb site to confirm that the appropriate elements appear or disappear based on whether the user is logged in/out.
Step 4: Gate Access to Pages with Outseta’s Protected Content Feature
Outseta allows you to set up protected content. In other words, pages are only accessible to specific members based on their subscription plan or the add-on products they've purchased. Using this feature requires no additional setup within WeWeb.
👉 Set up protected content in Outseta
✅ Test It: Log out and try accessing the protected content—you should be redirected ot the configured Access Denied URL. Log back in to verify access is restored.
Integration Complete!
That’s a wrap! You’ve successfully integrated Outseta with WeWeb, enabling sign-up, login, profile, logout and protected content functionality.
It's also possible to combine Outseta with WeWeb auth plugins for native WeWeb access control and conditional rendering:
👉 Combine WeWeb's Token Based Auth Plugin with Outseta
👉 Combine WeWeb's Xano Auth Plugin with Outseta
Need help or have questions? Reach out to Outseta Support ([email protected]). We’re here to help!
Bonus: On-Page Embeds
While Outseta’s popup embeds require less effort, you might still want a page per embed, which is possible with Outseta's on-page embeds.
We recommend adding data-o-anonymous and data-o-authenticated to the navigation links or buttons leading to the on-page embed pages rather than directly to the on-page embed elements.
Signup
To create a Sign-Up on-page embed, use the following attributes on a div element:
| Name | Value | Note |
|---|---|---|
| data-o-auth | 1 | or empty |
| data-mode | embed | |
| data-widget-mode | register |
Login
To create a Login on-page embed, use the following attributes on a div element:
| Name | Value (popup) | Note |
|---|---|---|
| data-o-auth | 1 | or empty |
| data-mode | embed | |
| data-widget-mode | login |
Profile
To create a Profile on-page embed, use the following attributes on a div element:
| Name | Value (popup) | Note |
|---|---|---|
| data-o-profile | 1 | or empty |
| data-mode | embed |