Skip to main content
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 Assets > Tours.
  2. Click on the tour you want to embed.
  3. On the tour page, find the “Get Embed Code” button (look for a code icon).
  4. Click it to open the Embed Code Modal.
The modal is 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.

​
Style Presets

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

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

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

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

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

​
Background Color

Controls the background of the widget container. Toggle on/off: You can enable or disable the background entirely:
  • 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).
  • Background disabled (transparent): The widget has no background and blends seamlessly with your website’s existing design.
When the background is disabled, the preview shows a contrast background to help you visualize what the widget looks like, with a dashed border indicating the transparent area.

​
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

Once you are happy with how your widget looks:
  1. Scroll down in the embed modal to the “Embed Code” section.
  2. The full HTML code is displayed in a scrollable code block.
  3. Click the “Copy Code” (or “Copy Embed Code”) button.
  4. The code is copied to your clipboard with a confirmation (“Copied!”).
  5. Paste the code into your website.
The copy button uses a gradient pink-to-orange style and shows a checkmark icon when the code has been successfully copied.

​
Adding the Widget to Your Website

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

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

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

​
Static HTML Sites

Simply paste the embed code directly into your HTML file where you want the widget to appear. No additional setup needed.

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

​
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 the embed code generator in Fanaura.
  2. Re-copy the updated embed code.
  3. Replace the old code on your website with the new code.
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.

​
Customization Tips

​
Match Your Website’s Fonts

The embed code uses web-safe fonts from the style preset you choose. The font families vary by preset:
  • 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.

​
Neon on Dark Backgrounds

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.

​
Keep It Simple

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

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

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

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

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

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

​
Next Steps