> ## 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.

# Embed Widget

> Generate embeddable tour date widgets for your website — choose from four style presets, customize colors, preview live, and copy the embed code to your clipboard.

Fanaura lets you generate a beautiful, embeddable tour dates widget that you can add to any external website — your official artist site, your WordPress blog, your Squarespace page, or anywhere else that accepts HTML. The widget shows your upcoming tour dates with venue details and ticket buttons, all styled to match your brand.

***

## Opening the Embed Code Generator

<Steps>
  <Step title="Navigate to Your Tour">
    Navigate to **Assets > Tours** and click on the tour you want to embed.
  </Step>

  <Step title="Find the Embed Button">
    On the tour page, find the **"Get Embed Code"** button (look for a code icon).
  </Step>

  <Step title="Open the Modal">
    Click it to open the **Embed Code Modal** — a full customization tool with a live preview and a copy-to-clipboard button.
  </Step>
</Steps>

***

## What the Widget Shows

Your embedded widget displays:

* **Tour name** as a heading
* **Each upcoming event** with:
  * Date (formatted clearly)
  * Venue name
  * City and state/country
  * A **"Tickets"** button linking to the ticket URL (if a ticket link is provided)
* **A "Follow Artist" link** back to your Fanaura page
* **Responsive layout** that adapts to any screen size

<Info>Events are displayed in chronological order (soonest first). Only events with valid dates are included.</Info>

***

## Embed Types

Fanaura generates **HTML embed code** — a self-contained block of HTML and inline CSS that works on any website without external dependencies.

### HTML Embed

The HTML embed is a single block of code containing all the markup and styling inline. This means:

* **No external scripts required** — It works immediately when pasted into any HTML page.
* **No dependencies** — No JavaScript libraries, no CDN links, nothing to load.
* **Self-contained** — Everything the widget needs is included in the code block.
* **Responsive** — Includes CSS media queries for mobile devices.

<Tip>Just copy the code and paste it into your website's HTML wherever you want the tour dates to appear. No technical setup required.</Tip>

***

## Style Presets

Fanaura offers four visual style presets, each with its own design language:

<Tabs>
  <Tab title="Modern">
    A clean, contemporary design with date blocks and rounded cards. Events are displayed in a grid-like layout with bold date blocks on the left, venue and city information in the center, and ticket buttons on the right. Uses rounded corners and subtle shadows for depth.

    **Best for:** Artist websites with a modern, clean aesthetic. Works well on both light and dark backgrounds.
  </Tab>

  <Tab title="Editorial">
    A magazine-style layout with elegant typography and horizontal dividers between events. Events are displayed in a list format with dates, venues, and locations flowing horizontally. Uses refined fonts and minimal decoration.

    **Best for:** Press pages, elegant artist websites, and sites with a more refined visual identity.
  </Tab>

  <Tab title="Minimal">
    The most stripped-down option. Clean lines, minimal decoration, and maximum readability. Events are listed with just the essential information — date, venue, city, and a ticket link.

    **Best for:** Websites where simplicity is key. Works great embedded in blog posts or as a sidebar widget.
  </Tab>

  <Tab title="Neon">
    A bold, eye-catching design with glowing accents and vibrant colors. Date blocks and buttons have a neon glow effect (CSS box-shadow) that makes them pop. Uses the same layout as Modern but with added visual energy.

    **Best for:** EDM, pop, hip-hop, and any artist with a bold, high-energy brand. Looks stunning on dark backgrounds.
  </Tab>
</Tabs>

To choose a style, click on the style name in the left panel of the embed modal. The preview updates instantly.

***

## Color Customization

Beyond the style preset, you can customize three colors to match your brand:

### Primary Color (Accent)

This controls the color of:

* Date blocks (the colored box showing the month and day)
* Ticket buttons
* "Follow Artist" links
* Neon glow effects (in the Neon preset)

**Default:** Pink (`#ec4899`)

Click the **color swatch** to open a color picker, or type a hex value directly into the input field. Popular color presets are available as clickable swatches below the picker.

### Text Color

Controls the color of:

* Venue names
* City/state text
* Date text
* General typography

**Default:** White (`#ffffff`)

<Tip>If your website has a light background, switch the text color to dark (like `#1a1a1a`). If your website has a dark background, keep text white.</Tip>

### Background Color

Controls the background of the widget container.

<Tabs>
  <Tab title="Background Enabled">
    The widget has a solid background color. Great for embedding on pages where you want the widget to stand out as its own visual block.
  </Tab>

  <Tab title="Background Disabled (Transparent)">
    The widget has no background and blends seamlessly with your website's existing design. The preview shows a contrast background with a dashed border to help you visualize the transparent area.
  </Tab>
</Tabs>

### Recent Colors

Fanaura remembers your recently used colors across all three color pickers. These appear as small swatches below each picker, so you can quickly reuse colors from earlier in your session.

### Preset Color Swatches

Each color picker includes a row of preset colors — popular choices that work well for music artist branding:

* Classic black and white
* Vibrant pinks, purples, and blues
* Warm oranges and reds
* Cool greens and teals

Click any swatch to apply that color instantly.

***

## Live Preview

The right side of the embed modal shows a **live preview** of your widget. As you change styles, colors, or settings, the preview updates in real time so you can see exactly what the embed will look like before copying the code.

The preview uses your actual tour data — real event dates, venue names, and cities — so you are seeing the real widget, not a placeholder.

<Info>
  **Preview features:**

  * **Glassmorphic UI** — The preview sits in a frosted glass container that simulates how the widget looks on a real page.
  * **Event count indicator** — Shows how many events are included in the embed (e.g., "3 Events in Embed").
  * **Style-specific rendering** — Each preset looks distinctly different in the preview. Switch between them to compare.
  * **Color accuracy** — The preview uses the exact hex colors you selected, including opacity variations for borders and muted text.
</Info>

***

## Copying the Embed Code

<Steps>
  <Step title="Review Your Widget">
    Make sure you are happy with how your widget looks in the live preview.
  </Step>

  <Step title="Scroll to Embed Code Section">
    Scroll down in the embed modal to the **"Embed Code"** section. The full HTML code is displayed in a scrollable code block.
  </Step>

  <Step title="Click Copy Code">
    Click the **"Copy Code"** (or **"Copy Embed Code"**) button. The code is copied to your clipboard with a confirmation ("Copied!").
  </Step>

  <Step title="Paste on Your Website">
    Paste the code into your website wherever you want the tour dates to appear.
  </Step>
</Steps>

***

## Adding the Widget to Your Website

<Tabs>
  <Tab title="WordPress">
    1. Open the page or post where you want the tour dates.
    2. Add a **Custom HTML** block (in the Gutenberg editor, search for "HTML").
    3. Paste the embed code into the HTML block.
    4. Preview the page to confirm it looks correct.
    5. Publish or update the page.
  </Tab>

  <Tab title="Squarespace">
    1. Open the page editor.
    2. Add a **Code** block (Insert > Code).
    3. Paste the embed code.
    4. Toggle the code block display mode to **HTML**.
    5. Save the page.
  </Tab>

  <Tab title="Wix">
    1. Open the Wix editor.
    2. Add an **HTML Embed** element (Add > Embed > Custom Embed).
    3. Paste the embed code into the code field.
    4. Resize the element to fit your page layout.
    5. Publish.
  </Tab>

  <Tab title="Shopify">
    1. Open the page or template where you want tour dates.
    2. In the theme editor or page HTML, paste the embed code.
    3. Save and preview.
  </Tab>

  <Tab title="Static HTML">
    Simply paste the embed code directly into your HTML file where you want the widget to appear. No additional setup needed.
  </Tab>
</Tabs>

***

## Responsive Design

The embed widget is **fully responsive** and works on any screen size:

* **Desktop:** Events display in a horizontal layout with date, venue, location, and ticket button all in one row.
* **Tablet:** Layout adjusts slightly for medium screens.
* **Mobile:** Events stack vertically with each piece of information on its own line. Ticket buttons expand to full width for easy tapping.

<Info>The responsive behavior is built into the embed code via CSS media queries, so it works automatically without any additional configuration on your part.</Info>

***

## Updating the Widget

The embed code is a **snapshot** of your tour dates at the time you copied it. If you add new dates, change venues, or update ticket links after embedding:

<Steps>
  <Step title="Go Back to Fanaura">
    Go back to the embed code generator in Fanaura.
  </Step>

  <Step title="Re-Copy the Code">
    Re-copy the updated embed code.
  </Step>

  <Step title="Replace on Your Website">
    Replace the old code on your website with the new code.
  </Step>
</Steps>

<Warning>The embed code is static HTML, not a live connection. If you update your tour in Fanaura, you need to re-copy and replace the embed code on your website.</Warning>

<Tip>If you update your tour frequently, consider embedding on a page you can easily edit. Some artists keep a dedicated "/tour" page that they update with fresh embed code whenever dates change.</Tip>

***

## Customization Tips

### Match Your Website's Fonts

The embed code uses web-safe fonts from the style preset you choose:

| Preset              | Font Stack                                  |
| ------------------- | ------------------------------------------- |
| **Modern and Neon** | System fonts (Inter, system-ui, sans-serif) |
| **Editorial**       | Serif fonts (Georgia, Times)                |
| **Minimal**         | Clean sans-serif (Inter, Helvetica, Arial)  |

If your website uses a specific font, the widget will look natural alongside it since the presets use widely compatible font stacks.

### Dark Site? Light Site?

* **Dark website background:** Use white text color, enable the primary accent color for contrast, and consider enabling the background with a dark shade.
* **Light website background:** Use dark text color (like `#1a1a1a`), disable the background for transparency, and use a vibrant accent color for buttons.

<Tip>The Neon preset looks absolutely stunning on dark websites. The glow effects really pop against dark backgrounds. If your website has a dark theme, try Neon first.</Tip>

<Note>If you are not sure which preset to choose, start with **Modern**. It is the most versatile and looks great in almost any context.</Note>

***

## Common Questions

<AccordionGroup>
  <Accordion title="Is the widget interactive?">
    The ticket buttons are clickable links that open in a new tab, taking fans directly to the ticketing page. Other elements are display-only.
  </Accordion>

  <Accordion title="Does the widget auto-update when I change my tour in Fanaura?">
    No. The embed code is static HTML. To update the widget, re-generate the embed code and replace it on your website.
  </Accordion>

  <Accordion title="Can I customize the CSS beyond the color options?">
    Yes. The embed code is standard HTML and CSS. If you are comfortable with CSS, you can modify the inline styles to further customize the appearance. The widget uses the ID `#fanaura-tour-widget` for easy CSS targeting.
  </Accordion>

  <Accordion title="Is there a limit on how many events the widget shows?">
    No. The widget includes all events on your tour that have valid dates. If you have 30 tour dates, all 30 appear in the widget.
  </Accordion>

  <Accordion title="Can I embed on multiple websites?">
    Yes. Copy the embed code and paste it on as many websites as you want. There are no restrictions on where you use it.
  </Accordion>
</AccordionGroup>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Creating a Tour" icon="bus" href="/assets/tours/creating-a-tour">
    Build your tour from scratch.
  </Card>

  <Card title="Adding Events" icon="calendar-plus" href="/assets/tours/adding-events">
    Add and configure tour dates.
  </Card>

  <Card title="Support Artists" icon="microphone" href="/assets/tours/support-artists">
    Add opening acts to your tour.
  </Card>

  <Card title="RSVPs and Ticket Comps" icon="ticket" href="/assets/tours/rsvps-and-comps">
    Manage fan engagement for your shows.
  </Card>
</CardGroup>