> For the complete documentation index, see [llms.txt](https://referral-rocket.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://referral-rocket.gitbook.io/docs/getting-started/campaigns/installing-tracking-your-referral-campaign/option-2-custom-solution/embed-referral-rocket-widget.md).

# Embed Referral Rocket Widget

### Key Benefits of This Approach

1. **Custom Marketing Page**: Design a dedicated webpage that showcases your program details while perfectly aligning with your brand's visual identity. This allows you to create a tailored experience that resonates with your audience.
2. **Seamless Experience:** Users do not leave your website providing a seamless experience
3. **Simplified Program Management**: Leverage Referral Rocket's robust platform to handle the complexities of your referral or affiliate program, freeing you to focus on your core business activities.

### Step-by-Step Referral Flow Example

#### Step 1: Create a Branded Program Page

Develop a dedicated webpage that:

* Highlights your referral/affiliate program's key details
* Matches your brand's design and aesthetic
* Use the below Referral Rocket script to add referral widget into your page. 

```
// Add this script in the HEAD tag
<script type="text/javascript" campaign-id="YOUR-CAMPAIGN-ID" defer src="https://app.referralrocket.io/widget/widgetIndex.js"></script>

//Add this script in the body
<div class="hype_widget" campaign-id="YOUR-CAMPAIGN-ID"></div>
```

<figure><img src="https://referral-rocket.gitbook.io/~gitbook/image?url=https%3A%2F%2F346708387-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FJpvWNOwMd3hfowlhBXaA%252Fuploads%252Fao4iCJGIAtHjqqjFXSLn%252Fimage.png%3Falt%3Dmedia%26token%3D14660de5-e326-4cfe-b556-c9fd79efbd70&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=263d4efd&#x26;sv=2" alt=""><figcaption></figcaption></figure>

1. **Program Signup**
   * Users join referral program
   * Receive personalized referral link which they can share with their friends

<figure><img src="https://referral-rocket.gitbook.io/~gitbook/image?url=https%3A%2F%2F346708387-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FJpvWNOwMd3hfowlhBXaA%252Fuploads%252FCcdCukJqxtuY0yri3XJV%252FScreenshot%25202024-06-10%2520at%25209.28.27%2520PM.png%3Falt%3Dmedia%26token%3Db6e07d85-752f-420d-837c-d2ed16e55d7c&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=70bf4bd0&#x26;sv=2" alt=""><figcaption></figcaption></figure>