# Approve Microsite Users via Segments

You can set up an approval system for your microsite users to gain more control over who registers for the microsite and becomes an advocate for your brand.

Set up the approval system for your microsite by modifying the microsite registration form, user segments, and conditional rendering on microsite pages. This help article explains how to configure the approval system and outlines what the registration process will look like for an end user.

{% stepper %}
{% step %}

#### Step 1: Create user segments

[Create user segments](https://help.impact.com/brand/advocate-program/manage-advocate-participants/manage-advocate-user-segments) to group users based on their status. You will then be able to show users different types of microsite content based on their user segments.

We recommend creating the following segments for an approval system:

* **Pending:** For users who have registered for the microsite but have not yet been approved to participate in the Advocate program.
* **Approved:** For users who have registered for the microsite and who have been approved to participate in the Advocate program.
  {% endstep %}

{% step %}

#### Step 2: Create a microsite

A microsite must be set up in your Advocate account. If you've created a microsite already, you can skip this step.

1. From the left navigation menu, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content**.
2. On the *Microsite* card, select **Setup**.
3. On the *Setup Microsite* screen, select **Setup Referral Microsite**.
   * You’ll set up a basic microsite including all required pages, routing, and emails such as the verification email.
     {% endstep %}

{% step %}

#### Step 3: Create conditional sections

After the microsite is set up, you’ll need to set up conditional sections with content targeting users pending approval and users that have already been approved. You will need to set up conditional sections if you want some microsite users to see specific content and to block other microsite users from seeing that content, e.g., *pending* users would see a message telling them their account needs to be approved before they can make referrals.

We recommend setting up this content on the following pages of the microsite:

* **Dashboard:** The Dashboard is the page where users can access their referral sharelink and basic information about the referral program. We recommend restricting access to the dashboard to prevent pending users from accessing their sharelink, and because it is the first page most users will see after completing the microsite registration and email verification process.
* **Activity:** The Activity page is where users can see a list of their referrals and statistics, like the number of rewards earned, tied to the Advocate program. We recommend restricting access to this page to keep pending users from viewing information about the program until they have been approved.
* **Tax & Payout Settings Page:** (Cash Payouts microsites only) The Tax & Payout Settings page is where users can enter their tax and banking information to receive cash rewards from an Advocate program. We recommend restricting access to this page until a user is approved because users don’t need to enter their banking and tax information until after their first cash reward is available.

**Create the conditional section**

1. From the left navigation menu, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Content**.
2. On the *Microsite* card, select **Edit Content**.
3. Select one of the following pages from the list of pages and layouts:
   * Dashboard
   * Activity
   * Tax & Payout Settings Page
4. On the selected page, in the right panel, select **Add** → **Advanced**.
5. Below *Advanced*, select the **Conditional Area / Segment** component.
6. Select **Add to \<section>** to place the conditional section where desired on the page.
7. Update the segment name to “pending” or “approved”. You can use the Microsite Editor UI or the HTML Editor.

{% tabs %}
{% tab title="Microsite Editor UI" %}

1. Select **Layers** → **Conditional Section**.
2. Below *Conditional Section*, enter the segment name in the text box on the right-hand side of the screen.

   <div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-228827aa28015d0cbf75e368a663f91964d78132%2F079832d682eb55676db0c76a65d7894e555404ce86c965743f462ef5f652d604.png?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="HTML Editor" %}

1. Select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-63c2caf34c8c42984b458d40b5ac087e03360307%2Fc5fc23a16175bc8c8603fda06785d3d10c8d687bb14c7c6f1424d705c272963e.svg?alt=media) **\[Code view]** in the top menu bar and look for the `sqb-conditional-section` HTML tag.
2. Rename the `condition` attribute to `‘pending’` in `user.segments`.

   <div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3094d4b343991df595eaf7e3a6402542c74d4561%2F27848d9f4c837c60b74faa6b310ce773d01d5945295ae346cb8c630fe9ab4c05.png?alt=media" alt=""><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}

**Add content to the conditional section**

1. Move or add any content to be included in the *Conditional Section*. You can use the Microsite Editor UI or the HTML Editor.
   * For the **pending** segment, be sure to provide a clear message explaining that users must be approved before they can access the rest of the microsite.
   * For the **approved** segment, ensure that all content that users should see when accessing the page is included in the `sqb-conditional-section` HTML tag.

{% tabs %}
{% tab title="Microsite Editor UI" %}
You can either move existing content or add new content to the conditional section.

**Move existing content**

1. Select **Layers**.
2. In the *Layers* slideout, select the component you want to move, then select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[Close]** to close the slideout.
3. On the component, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[Move]**.
4. Navigate to the conditional section, and at the base or the top of the section, select **Move to Section Content**.

**Add new content**

1. In the right panel, select the **Add** tab.
2. Choose a component you want to add.
3. Navigate to the conditional section, and at the base or the top of the section, select **Move to Section Content**.
   {% endtab %}

{% tab title="HTML Editor" %}

1. Select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-63c2caf34c8c42984b458d40b5ac087e03360307%2Fc5fc23a16175bc8c8603fda06785d3d10c8d687bb14c7c6f1424d705c272963e.svg?alt=media) **\[Code view]** in the top menu bar and look for the `sqb-conditional-section` HTML tag.

2. Copy and paste existing HTML, or add new HTML code to the `sqb-conditional-section` HTML tag.
   {% endtab %}
   {% endtabs %}

3. Select **Save** to save the changes made in the Microsite Editor.
   {% endstep %}

{% step %}

#### Step 4: Update the microsite registration form

After the segments are created, the Microsite Form can be updated to place users into a segment upon registration automatically. Update the registration form by following these steps:

1. From the left navigation menu, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Data Sources** → **Forms**.
2. Hover over the microsite registration form you wish to update, and select **Edit**.
3. Scroll down to the *When the form succeeds* section, then select the ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media) **\[Drop-down-menu]** below *Update user segments*.
4. Select the **Add to “pending”** user segment.
   * **(Optional)** Repeat the step above if you wish to add or remove users to or from other user segments.
5. Select **Update Registration** to save your changes.
6. Test the changes by registering for a microsite account as a test user. If everything is configured correctly, the test user should be created with the “pending” segment in place. Check that the test user is only able to see the conditional content targeting users in the “pending” segment.
   {% endstep %}

{% step %}

#### Step 5: Approve microsite users

You’ll be able to approve microsite users through your Advocate account by following these instructions:

1. From the left navigation menu, select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → Participants**.
2. Navigate to the pending user’s participant page by searching for the individual user’s email address or by selecting the **Advanced filter** to look for all users in the pending segment.
3. On the user’s participant page, scroll down to the *Segments* section.
4. Select ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[Delete]** next to the *pending* segment to remove the user from that segment.
5. Select **Add segment** and select the **approved** segment from the ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media) **\[Drop-down menu]**.
   * The user should now be in the *approved* segment and should see the approved messaging in the microsite.
     {% endstep %}

{% step %}

#### The user experience

1. The user registers for the microsite and follows the standard email verification process. They will automatically be added to the *pending* segment upon registration.
2. After the email verification process is complete, the user will be directed to the microsite dashboard. Because the user is in the *pending* segment, they will see the *pending* messaging on the microsite.
3. When the user has been approved, they will see approved messaging after refreshing the *Dashboard* page or logging back in to the microsite.
   {% endstep %}
   {% endstepper %}
