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

# Sharing & Embedding

> How to share your smart links, generate social media previews, embed tour date widgets, create QR codes, and use UTM tracking for campaign attribution.

Your smart links are only valuable if fans find them. This guide covers every way to share, embed, and distribute your Fanaura content -- from simple copy-paste links to embeddable widgets and QR codes.

***

## Copy Link

Every asset in Fanaura has a **Copy Link** button. One click and the smart link URL is on your clipboard, ready to paste anywhere.

### Where to Find It

* **Assets page** -- each release, merch product, tour, and extra has a copy icon
* **Release detail page** -- prominent Copy Link button
* **Tour detail page** -- copy the full tour link or individual event links
* **Merch product card** -- copy button on each product
* **Artist Hub** -- copy your main hub URL from your settings

### Where to Paste It

<Tabs>
  <Tab title="Social Media">
    * **Instagram bio** -- your Artist Hub link
    * **Instagram Stories** -- link sticker with your presave or stream link
    * **TikTok bio** -- your Artist Hub link
    * **Twitter/X posts** -- share presave, stream, or event links in tweets
    * **Facebook posts** -- share with rich preview (Open Graph metadata ensures it looks great)
  </Tab>

  <Tab title="Content Platforms">
    * **YouTube descriptions** -- add links under every video
    * **Discord/Slack** -- share with your community
    * **Blog posts** -- embed in written content
  </Tab>

  <Tab title="Direct Messages">
    * **WhatsApp/iMessage** -- send directly to fans or industry contacts
    * **Email** -- include in newsletters, press emails, and personal messages
    * **SMS** -- include in text blasts (links are auto-shortened)
  </Tab>
</Tabs>

***

## Social Media Previews

When you share a Fanaura smart link on social media, it looks professional. Every smart link includes **Open Graph (OG) metadata** and **Twitter Card** data that tells platforms exactly how to display your link.

### What Gets Displayed

When you paste a Fanaura link on a social platform, the preview shows:

* **Image** -- your album artwork, product photo, or artist image (large, high-quality)
* **Title** -- the name of the content (e.g., "Midnight Drive by Midnight Artist")
* **Description** -- context about the content (e.g., "Pre-save on Spotify, Apple Music, and more")
* **URL** -- the clean `fan.fanaura.com` domain

### Platform-Specific Behavior

| Platform          | Preview Type                   | Image Size           |
| ----------------- | ------------------------------ | -------------------- |
| Instagram Stories | Link sticker (no preview card) | N/A                  |
| Twitter/X         | Large image card               | 1200x630 recommended |
| Facebook          | Rich preview card              | 1200x630 recommended |
| LinkedIn          | Article card                   | 1200x627 recommended |
| Discord           | Rich embed                     | Varies               |
| iMessage          | Rich link preview              | Varies               |
| WhatsApp          | Rich link preview              | Varies               |
| Slack             | Unfurled link                  | Varies               |

### Open Graph Tags

Every smart link automatically includes these OG tags:

```html theme={null}
<meta property="og:title" content="Midnight Drive - Midnight Artist" />
<meta property="og:description" content="Pre-save on Spotify, Apple Music, and more" />
<meta property="og:image" content="https://[artwork-url]" />
<meta property="og:url" content="https://fan.fanaura.com/midnightartist/midnight-drive" />
<meta property="og:type" content="music.song" />
```

### Twitter Cards

Twitter-specific tags for optimized display on X:

```html theme={null}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Midnight Drive - Midnight Artist" />
<meta name="twitter:description" content="Pre-save on Spotify, Apple Music, and more" />
<meta name="twitter:image" content="https://[artwork-url]" />
```

### Optimizing Your Previews

<Tip>**Use high-quality artwork** -- at least 1200x1200 pixels. Social platforms crop and resize, so start with the biggest image you have.</Tip>

<Tip>**Check previews before sharing** -- use Facebook's Sharing Debugger or Twitter's Card Validator to see exactly how your link will appear.</Tip>

<Warning>**Clear cached previews** -- if you update your artwork or title, social platforms may cache the old preview. Use their debugging tools to force a refresh.</Warning>

***

## Tour Embed Widget

The tour embed widget lets you display your Fanaura tour dates on any external website -- your official site, a WordPress blog, a Squarespace page, or anywhere that accepts HTML.

### Generating an Embed

<Steps>
  <Step title="Navigate to Tours">
    Go to your **Tours** section in Fanaura.
  </Step>

  <Step title="Select Your Tour">
    Select the tour you want to embed.
  </Step>

  <Step title="Click Embed">
    Click the **Embed** button.
  </Step>

  <Step title="Choose Style">
    Choose your embed type and style preset.
  </Step>

  <Step title="Copy Code">
    Copy the generated code.
  </Step>

  <Step title="Paste on Your Site">
    Paste it into your website.
  </Step>
</Steps>

### Embed Types

<Tabs>
  <Tab title="JavaScript Embed (Recommended)">
    A lightweight JavaScript snippet that loads your tour dates dynamically:

    ```html theme={null}
    <div id="fanaura-tour-widget" data-artist="midnightartist" data-tour="spring-2027"></div>
    <script src="https://fan.fanaura.com/embed/tour.js"></script>
    ```

    **Advantages:**

    * Lightweight and fast
    * Tour dates update automatically (no need to re-embed when dates change)
    * Responsive design adapts to any container width
    * Style customization via data attributes
  </Tab>

  <Tab title="HTML Embed (Self-Contained)">
    A standalone HTML block with all tour dates included:

    ```html theme={null}
    <div class="fanaura-tour-embed">
      <div class="fanaura-event">
        <span class="date">Mar 15</span>
        <span class="venue">Ryman Auditorium</span>
        <span class="city">Nashville, TN</span>
        <a href="https://tickets.example.com" class="tickets-btn">Tickets</a>
      </div>
      <!-- More events... -->
    </div>
    ```

    **Advantages:**

    * Works without JavaScript
    * Full control over styling
    * No external dependencies

    <Warning>Won't auto-update when you add or change tour dates. You'll need to re-generate and re-embed.</Warning>
  </Tab>
</Tabs>

### Style Presets

<CardGroup cols={2}>
  <Card title="Modern" icon="square">
    Clean, card-based layout with rounded corners and subtle shadows. White cards on light background, rounded buttons, subtle hover effects, clean sans-serif typography.
  </Card>

  <Card title="Editorial" icon="newspaper">
    Text-forward design inspired by concert listing magazines. Minimal visual elements, strong typography hierarchy, date and venue emphasis, elegant dividers.
  </Card>

  <Card title="Minimal" icon="minus">
    The less-is-more approach. Plain text layout, no cards or borders, maximum readability. Blends into any website design.
  </Card>

  <Card title="Neon" icon="bolt">
    Bold, vibrant, attention-grabbing. Dark background, glowing accent colors, bold typography, animated hover effects.
  </Card>
</CardGroup>

### Color Customization

Beyond the presets, you can customize colors via data attributes:

```html theme={null}
<div id="fanaura-tour-widget"
  data-artist="midnightartist"
  data-tour="spring-2027"
  data-primary-color="#FF5733"
  data-bg-color="#1A1A1A"
  data-text-color="#FFFFFF"
  data-style="neon">
</div>
```

<Info>All embed styles are fully responsive. They look great on desktop browsers, tablets, and mobile phones. The layout automatically adjusts to the container width.</Info>

***

## QR Codes

QR codes bridge the physical and digital worlds. Generate one from any smart link and fans can scan it with their phone camera.

### Use Cases

<CardGroup cols={2}>
  <Card title="Live Shows" icon="music">
    Display a QR code on screen between sets that links to your presave or merch.
  </Card>

  <Card title="Merch Inserts" icon="box-open">
    Print a QR code on a card included with merch orders, linking to your Artist Hub.
  </Card>

  <Card title="Posters & Flyers" icon="image">
    Add a QR code to physical tour posters that links to the ticket page.
  </Card>

  <Card title="Vinyl & CD Inserts" icon="record-vinyl">
    Link to bonus digital content or your stream page.
  </Card>
</CardGroup>

Additional uses: business cards (Artist Hub QR), backstage passes and laminates (exclusive fan experience links).

### Generating QR Codes

You can generate a QR code from any Fanaura smart link URL using:

* Online QR code generators (paste your `fan.fanaura.com` URL)
* Built-in QR generation tools (where available in the platform)
* Design tools like Canva, which have QR code generators built in

### QR Code Best Practices

<Tip>**Size matters** -- make the QR code at least 1 inch (2.5 cm) square for reliable scanning.</Tip>

<Tip>**Contrast is key** -- dark code on a light background scans best. Avoid low-contrast color combinations.</Tip>

<Warning>**Test before printing** -- always scan the QR code with your own phone before printing 10,000 posters.</Warning>

<Tip>**Add a call to action** -- don't just put a QR code. Add text like "Scan to presave" or "Scan to win merch."</Tip>

<Tip>**Include the URL below the code** -- some people prefer typing. Show the short URL under the QR code as a fallback.</Tip>

***

## UTM Tracking

UTM parameters help you understand which promotional channels drive the most traffic and conversions.

### What Are UTM Parameters?

UTM (Urchin Tracking Module) parameters are tags you add to the end of a URL to track where traffic comes from. They look like this:

```
fan.fanaura.com/midnightartist/midnight-drive?utm_source=instagram&utm_medium=story&utm_campaign=presave_launch
```

### Available UTM Parameters

| Parameter      | Purpose                      | Example                                         |
| -------------- | ---------------------------- | ----------------------------------------------- |
| `utm_source`   | Where the traffic comes from | `instagram`, `twitter`, `email`, `tiktok`       |
| `utm_medium`   | The marketing medium         | `story`, `post`, `bio`, `blast`, `ad`           |
| `utm_campaign` | The campaign name            | `presave_launch`, `tour_announce`, `merch_drop` |
| `utm_content`  | Differentiates variants      | `version_a`, `header_link`, `footer_link`       |
| `utm_term`     | Keyword tracking (for paid)  | `indie_music`, `concert_tickets`                |

### How to Use UTMs

<Steps>
  <Step title="Take Your Smart Link URL">
    Start with your base Fanaura smart link.
  </Step>

  <Step title="Add the Question Mark">
    Add `?` after the URL.
  </Step>

  <Step title="Add UTM Parameters">
    Add your UTM parameters separated by `&`.
  </Step>
</Steps>

**Examples:**

<Tabs>
  <Tab title="Instagram Story">
    ```
    fan.fanaura.com/midnightartist/midnight-drive?utm_source=instagram&utm_medium=story&utm_campaign=midnight_drive_presave
    ```
  </Tab>

  <Tab title="Email Blast">
    ```
    fan.fanaura.com/midnightartist/midnight-drive?utm_source=email&utm_medium=blast&utm_campaign=midnight_drive_presave
    ```
  </Tab>

  <Tab title="Twitter Post">
    ```
    fan.fanaura.com/midnightartist/midnight-drive?utm_source=twitter&utm_medium=post&utm_campaign=midnight_drive_presave
    ```
  </Tab>
</Tabs>

### Viewing UTM Data

UTM data is captured when fans click your links and appears in your analytics:

* **Traffic by source** -- how many clicks came from Instagram vs Twitter vs email
* **Conversion by source** -- which source drives the most presaves or purchases
* **Campaign performance** -- compare different campaign tags to see what works

### UTM Best Practices

<Tip>**Be consistent** -- always use lowercase, no spaces (use underscores). `instagram` not `Instagram` or `IG`.</Tip>

<Tip>**Name campaigns clearly** -- `midnight_drive_presave` is better than `campaign_1`.</Tip>

<Tip>**Track everything** -- use different UTMs for every unique placement. Instagram bio vs Instagram story should have different `utm_medium` values.</Tip>

<Tip>**Keep a spreadsheet** -- track your UTM naming conventions so they stay consistent across campaigns.</Tip>

***

## Sharing Strategy: Putting It All Together

<Tabs>
  <Tab title="New Release">
    1. **Bio link** -- update your Instagram/TikTok bio to your Artist Hub (it will show the new release prominently)
    2. **Instagram Story** -- share the presave link with a link sticker and UTM: `?utm_source=instagram&utm_medium=story&utm_campaign=[release]_presave`
    3. **Tweet** -- share the presave link with artwork and UTM tracking
    4. **Email blast** -- send to your fan list with the presave link embedded
    5. **SMS blast** -- text your most engaged fans with the short link
    6. **Discord/community** -- share in your fan community channels
    7. **YouTube** -- add the presave link to your video descriptions
  </Tab>

  <Tab title="Tour Dates">
    1. **Bio link** -- Artist Hub shows all dates on the Tours tab
    2. **Embed widget** -- add the tour embed to your official website
    3. **City-specific posts** -- share individual event links for each city
    4. **QR code** -- display at current shows for fans to see upcoming dates
    5. **Email blast** -- send the full tour announcement to your list
  </Tab>

  <Tab title="Merch Drops">
    1. **Bio link** -- Artist Hub Merch tab shows everything
    2. **Product links** -- share specific product links for featured items
    3. **QR codes** -- include in physical packaging for reorder / new collections
    4. **Instagram Shopping** -- pair with Fanaura product links for tracking
  </Tab>
</Tabs>

***

## Tips

<Tip>**Always use UTMs for paid promotion.** If you're spending money on Instagram ads or Twitter promoted posts, UTM tracking tells you which spend is driving results.</Tip>

<Tip>**Keep your Artist Hub as your permanent bio link.** Change individual promotional links in stories and posts, but keep the Hub in your bio for long-term discoverability.</Tip>

<Tip>**Test your social previews.** Before launching a campaign, paste your link in a private message to yourself on each platform to see how the preview looks.</Tip>

<Warning>**Refresh QR codes when links change.** If you update a URL or slug, your old QR code might not work. Always re-test after changes.</Warning>

<Tip>**Embed the tour widget and forget about it.** The JavaScript embed auto-updates, so once it's on your website, new dates appear automatically. One less thing to maintain.</Tip>

<Tip>**Use short links for SMS.** Long URLs eat into your 160-character limit. Fanaura auto-shortens links in SMS blasts, but if you're composing manually, use the short link format.</Tip>