Outseta allows you to show or hide any specific element on your website pages using custom attributes. This allows you to protect any page element based on:

Whether or not a user has logged in
A member's subscription plan or any add-on products that they've purchased

This makes is really easy to select any element on a page—a link, a button, a video, a block of content, etc—and only show that content to the appropriate people.

Elements can be shown or hidden by adding custom attributes to the element, or my selecting the element on a page and using Outseta's Webflow app—both methods are covered in this post.

Prerequisites

If you've added the Outseta's Quick Start embed script to your website (found on the AUTH > EMBEDS page) or installed Outseta's Webflow App, this feature will work for you immediately.

If you haven't, you'll need to first add Outseta's no-code script to the header of all your website pages to enable this feature.

Edit the code below so that the bolded word domain reflects your Outseta login URL, then add it to the header of all your website pages.

<script>
var o_options = {
  domain: "domain.outseta.com",
  load: "nocode"
};
</script>
<script src="https://cdn.outseta.com/outseta.min.js"
        data-options="o_options"/>
</script>

Specify which elements you want to show or hide

1. First, select the element on the page that you want to show or hide. In this example I've chosen the Login link. Once you've selected the page element, click the gear icon in the top right hand corner of the screen to open the element's Settings.

2. Next, you'll want to add one of the custom attributes identified below to the page element you've selected. These custom attributes control who will be able to access the page element that you are working with.

Custom attributes used to protect elements

data-o-anonymous—Use this custom attribute to identify page elements that you want to show to anonymous (not logged in) website visitors. The value should always be set to 1.

data-o-authenticated—Use this custom attribute to identify page elements that you only want to display to authenticated (logged in) users. The value should always be set to 1.

data-o-plan-content—Use this custom attribute to identify page elements that you want to show or hide from logged in users with a specific subscription plan.

The value should be set to the Uid value that identifies your subscription plan. You can find this value by going to BILLING > PLANS and clicking on the name of one of your pricing plans. The Uid value appears in the page URL.

If you want to show your page element to users on specific subscription plans, separate the Uids for each plan with a coma. The resulting format should be:

data-o-plan-content="planUid1,planUid2"

If you want to hide your page element from users on specific subscription plans, prefix the plan Uid with an exclamation point:

data-o-plan-content="!planUid1,!planUid2"

data-o-addon-content—Use this custom attribute to identify page elements that you only want to show to logged in users who have purchased a specific add-on. The value should be set to the Uid value that identifies your add-on. You can find this value by going to BILLING > ADD-ONS and clicking on the name of one of your add-ons. The Uid value appears in the page URL.

If you want to show your page element to users who have purchased specific add-ons, separate the Uids for each plan with a coma. The resulting format should be:

data-o-addon-content="addOnUid1,addOnUid2"

If you want to hide your page element from users who have purchased specific add-ons, prefix the add-on Uid with an exclamation point:

data-o-addon-content="!addOnUid1,!addOnUid2"

Protecting elements (Webflow App method)

Outseta's Webflow App also allow you to apply the attributes referenced above to show or hide any element on a page. Specifically, you can:

Display the element to authenticated users
Display the element to anonymous (not authenticated) users
Show or hide the element based on the plan or add-on products a user has access to

These actions again add custom attributes in the element's Settings panel.

Protecting content via other attributes

If you want to protect content based on values in other attributes, or even custom attributes, you can do so with custom code. The technique will be to establish a class for all such elements and hide them by default. Then, on page load retrieve the user attributes and if they have the proper value, unhide the elements. The code would look something like the following:

<style id="style-protected-attribute-content">
  /* Hide elements by default */
  .protected-attribute-content {
    display: none;
  }
</style>

<div class="protected-attribute-content">
  Content that should only be seen by users with a last name of Smith
</div>

<script>
Outseta
  .getUser()
  .then(user => {
    // Test to see if user has the proper value
    if (user.LastName === 'Smith') {
      // Remove the hiding style element to show the content
      document
        .getElementById('style-protected-attribute-content')
        .remove();
    }
  });
</script>

If you need any help showing or hiding page elements, please email us at support(at)outseta.com.

Show or hide page elements

Prerequisites

Specify which elements you want to show or hide

Custom attributes used to protect elements

Protecting elements (Webflow App method)

Protecting content via other attributes