# Set Up an Instant Access Widget
Take the PXA course
Designed for e-commerce and retail clients, instant access widgets provide your customer advocates and their referred friends with an easy way to engage with your referral program—no password or authentication required.
There are 2 types of instant access widgets:
* The *website referral widget* provides your customer advocates an easy way to join your referral program and access their share links.
* The *friend widget* will register the referred customer into the Advocate program, then issue a reward—like a discount code—when they provide their email address. It should be displayed on the landing page when your customer advocate's friends click on their share link.
For more details about how instant access widgets work, refer to [Widget Types Explained](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained).
#### Step 1: Set up the widgets in your program rules
First, you’ll need to configure the appearance of your instant access widgets.
{% tabs %}
{% tab title="Website referral widget" %}
1. From the left navigation menu, select  **\[Engage] → Program Rules**.
2. Select the **Content** tab at the top of the page.
3. On the *Website referral widget* card, select **Edit**.
4. Adjust the appearance and contents of the template.
* For more information about how to use the widget editor, refer to [Customize Program Widgets](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets). Components from the following groups can’t be added to instant access widgets: *Rewards*, *Statistics*, *Microsite Components*, or *Referrals*.
5. Save your changes to the widget.
{% endtab %}
{% tab title="Friend widget" %}
1. From the left navigation menu, select  **\[Engage] → Program Rules**.
2. Select the **Content** tab at the top of the page.
3. On the *Friend widget* card, select **Edit**.
4. Adjust the appearance and contents of the template.
* For more information about how to use the widget editor, refer to [Customize Program Widgets](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/customize-program-widgets). Components from the following groups can’t be added to instant access widgets: *Rewards*, *Statistics*, *Microsite Components*, or *Referrals*.
5. Optionally, select  **\[Unchecked box] Show** on the *Friend widget* card to *Show automatically for referred friends*.
* This option enables the auto popup feature. Auto popup creates a more engaging referred friend experience by making the friend widget stand out on the landing page.
6. Save your changes to the widget.
{% endtab %}
{% endtabs %}
#### Step 2: Configure the friend widget to issue a reward (optional)
If you’re using the friend widget, you can configure it to provide a discount code to the referred friend. To do so, first you’ll need to set up a fuel tank reward. Then, configure your program rules to issue this reward through the friend widget.
{% hint style="info" %}
**Note:** If you already have a fuel tank reward set up for your program, then you can edit the [existing reward](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/set-up-a-fuel-tank-reward) and change the *Access Type* to **Instant Access** instead.
{% endhint %}
1. Set up a [fuel tank reward](https://help.impact.com/brand/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/set-up-a-fuel-tank-reward).
* The fuel tank is where you’ll upload the unique discounts that impact.com will display in the friend widget.
2. From the left navigation menu, select  **\[Engage] → Program Rules**.
3. Select the **Program Behaviour** tab at the top of the page.
4. Find the program rule that issues a reward to the referred friend, then select  **\[Edit action]**.
5. Make sure the action sends a **Reward and Email** to the **Friend**, then select **Next**.
6. At the top of the *Edit Reward* screen, select **Use a pre-configured reward**.
7. From the *Reward* drop-down list, select the fuel tank reward you created.
8. Select **Next**, then review the action and select **Save**.
#### Step 3: Install the widgets
Congrats! Your instant access widgets are ready to use. The final step is to generate a code snippet to embed into your post-purchase landing page, checkout flow, or wherever you want participants to access them.
{% tabs %}
{% tab title="Website referral widget" %}
1. From the top navigation bar, select  **\[User profile] → Settings**.
2. On the left, below *Advocate Settings*, select **Install**.
3. From the widget drop-down list, select one of the instant access widgets you created.
4. Choose whether you want to generate a code snippet for an **Embedded widget** or a **Popup widget**.
* Embedded widgets are displayed directly in your web page.
* Popup widgets will load in a popup after the participant clicks on your designated button or link.
5. Copy the generated code snippet, then add it to your e-commerce platform or landing page.
{% endtab %}
{% tab title="Friend widget" %}
{% hint style="info" %}
**Skip this step if your friend widget uses auto popup:** This step isn’t required for all friend widgets. The [Universal Tracking Tag (UTT)](https://help.impact.com/brand/what-would-you-like-to-learn-about/platform-features/tracking/javascript-tag-tracking/tracking-with-universal-tracking-tag-utt) automatically loads on your webpage any friend widgets are configured to *Show automatically for referred friends*. You can skip this step if your friend widget has this option enabled.
{% endhint %}
If you’re using a friend widget without auto popup enabled, the UTT won’t load the widget automatically—so you’ll need to generate the code snippet and place it on your page.
1. From the top navigation bar, select  **\[User profile] → Settings**.
2. On the left, below *Advocate Settings*, select **Install**.
3. In the *Display Widgets* section, select **Instant Access** as the type of widget you want to display.
4. From the widget drop-down list, select your friend widget.
5. Select the **Embedded Widget** display type.
6. Copy the generated code snippet, then add it to the page the referred friend will access.
{% endtab %}
{% endtabs %}
