> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getreditus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Showing the Widget Modal

> Display the in-app referral modal so users can share referral links and track referrals directly in your application.

This guide is the final section in a three-part series on integrating the Reditus Referral Program In-App Widget. Now that you’ve **loaded** the widget (Step 1) and **authenticated** your users (Step 2), the final step is to present the referral interface inside your application.

## Overview

Once the widget is **loaded** with `gr("loadReferralWidget", ...)` and a valid `auth_token` (JWT) is provided, the referral interface is accessible via `window.referralWidget`. You can invoke this at any time to display the referral modal.

There are two ways to display the modal:

1. **[Programmatically via JavaScript](#displaying-the-modal-programmatically)** – Manually trigger the modal from a button or custom UI event.
2. **[Automatically via URL Parameters](#displaying-the-modal-via-url-parameters)** – Open the modal based on a query string like `?reditus-show-referral=program`.

Use whichever approach fits your use case best—or both!

## Displaying the Modal Programmatically

```js Javascript theme={null}
window.referralWidget.show();
```

This method instantly shows the in-app referral modal. Link this action to a button in your UI: top navigation, side menu, or a dedicated "Referrals" page, so users can easily access and share their referral link.

### Implementation Example

<CodeGroup>
  ```js React theme={null}
  import React from "react";

  function ReferralButton() {
    const handleShowReferralModal = () => {
      if (window.referralWidget) {
        window.referralWidget.show();
      } else {
        console.error("Referral widget not initialized or unavailable.");
      }
    };

    return <button onClick={handleShowReferralModal}>Share & Earn</button>;
  }

  export default ReferralButton;
  ```

  ```js Vue theme={null}
  <template>
    <button @click="showReferralModal">Share & Earn</button>
  </template>

  <script>
  export default {
    name: "ReferralButton",
    methods: {
      showReferralModal() {
        if (window.referralWidget) {
          window.referralWidget.show();
        } else {
          console.error("Referral widget not initialized or unavailable.");
        }
      },
    },
  };
  </script>
  ```

  ```js Angular theme={null}
  // referral-button.component.ts
  import { Component } from '@angular/core';

  @Component({
    selector: 'app-referral-button',
    template: `<button (click)="showReferralModal()">Share & Earn</button>`
  })
  export class ReferralButtonComponent {
    showReferralModal(): void {
      if ((window as any).referralWidget) {
        (window as any).referralWidget.show();
      } else {
        console.error('Referral widget not initialized or unavailable.');
      }
    }
  }
  ```

  ```js Svelte theme={null}
  <script>
    function showReferralModal() {
      if (window.referralWidget) {
        window.referralWidget.show();
      } else {
        console.error("Referral widget not initialized or unavailable.");
      }
    }
  </script>

  <button on:click={showReferralModal}>Share & Earn</button>
  ```

  ```js Plain Javascript theme={null}
  <button id="showReferralModalBtn">Share & Earn</button>
  <script>
    document.getElementById("showReferralModalBtn").addEventListener("click", function() {
      if (window.referralWidget) {
        window.referralWidget.show();
      } else {
        console.error("Referral widget not initialized or unavailable.");
      }
    });
  </script>
  ```
</CodeGroup>

## Displaying the Modal via URL Parameters

The widget also supports deep linking using a query parameter like:

`?reditus-show-referral=program`

When the URL contains this parameter, the referral widget will **automatically open** and optionally switch to a specific tab:

| Value       | Behavior                           |
| ----------- | ---------------------------------- |
| `program`   | Opens the **Referral Program** tab |
| `referrals` | Opens the **Referrals** tab        |
| `rewards`   | Opens the **Rewards** tab          |

### Example URLs

* `https://your-app.com/dashboard?reditus-show-referral=program`
* `https://your-app.com/account/settings?reditus-show-referral=referrals`
* `https://your-app.com/billing?reditus-show-referral=rewards`

> ℹ️ The modal will open automatically after the widget is loaded and the user is authenticated.