Skip to main content

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.

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

1

Navigate to Your Tour

Navigate to Assets > Tours and click on the tour you want to embed.
2

Find the Embed Button

On the tour page, find the “Get Embed Code” button (look for a code icon).
3

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.

​
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
Events are displayed in chronological order (soonest first). Only events with valid dates are included.

​
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.
Just copy the code and paste it into your website’s HTML wherever you want the tour dates to appear. No technical setup required.

​
Style Presets

Fanaura offers four visual style presets, each with its own design language:
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.
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)
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.

​
Background Color

Controls the background of the widget container.
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.

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

​
Copying the Embed Code

1

Review Your Widget

Make sure you are happy with how your widget looks in the live preview.
2

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

Click Copy Code

Click the “Copy Code” (or “Copy Embed Code”) button. The code is copied to your clipboard with a confirmation (“Copied!”).
4

Paste on Your Website

Paste the code into your website wherever you want the tour dates to appear.

​
Adding the Widget to Your Website

  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.

​
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.
The responsive behavior is built into the embed code via CSS media queries, so it works automatically without any additional configuration on your part.

​
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:
1

Go Back to Fanaura

Go back to the embed code generator in Fanaura.
2

Re-Copy the Code

Re-copy the updated embed code.
3

Replace on Your Website

Replace the old code on your website with the new code.
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.
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.

​
Customization Tips

​
Match Your Website’s Fonts

The embed code uses web-safe fonts from the style preset you choose:
PresetFont Stack
Modern and NeonSystem fonts (Inter, system-ui, sans-serif)
EditorialSerif fonts (Georgia, Times)
MinimalClean 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.
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.
If you are not sure which preset to choose, start with Modern. It is the most versatile and looks great in almost any context.

​
Common Questions

The ticket buttons are clickable links that open in a new tab, taking fans directly to the ticketing page. Other elements are display-only.
No. The embed code is static HTML. To update the widget, re-generate the embed code and replace it on your website.
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.
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.
Yes. Copy the embed code and paste it on as many websites as you want. There are no restrictions on where you use it.

​
Next Steps

Creating a Tour

Build your tour from scratch.

Adding Events

Add and configure tour dates.

Support Artists

Add opening acts to your tour.

RSVPs and Ticket Comps

Manage fan engagement for your shows.