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

# Connect Lovable

**Lovable** makes it easy to generate and customize your website using simple prompts. By integrating **Ticket Spot** into your **Lovable** site, you can add fully functional ticketing—including sales, attendee management, payments, and confirmation emails—directly into the pages Lovable creates for you.

This guide walks you through generating your site in Lovable, installing the Ticket Spot widget, and enabling ticket purchasing and attendee management within your Lovable website.

<iframe width="100%" height="400" src="https://www.youtube.com/embed/dmWbe77wXZE" title="YouTube video" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />

Let’s get started 🚀

## Navigation

**Step 1:** Log in to your **Ticket Spot** account and click on the **Design** tab at the top navigation bar.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/design-tab.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=c4b1bd23333a09f6bd2e449986bc33e7" alt="design-tab" width="1353" height="556" data-path="assets/plugins/connect-lovable/design-tab.png" />

**Step 2:** Click on the **Widget Customization** tab from the left-side menu.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/widget-customization-tab.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=67372457a4fafb87fca9a045c63bde3b" alt="widget-customization-tab" width="1139" height="649" data-path="assets/plugins/connect-lovable/widget-customization-tab.png" />

**Step 3:** Click on the **Installation** button in the top-right corner of the Widget Customization panel.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/installtion-btn.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=97e2523a1ff7b0ac6c2c29c77446727b" alt="installtion-btn" width="1260" height="543" data-path="assets/plugins/connect-lovable/installtion-btn.png" />

**Step 4:** A modal window titled “How to Add Widget” will appear. Select the **Lovable** tab to view the integration prompt.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/lovable-tab.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=8a756d8262dbd1ea565fcece4df7ef60" alt="lovable-tab" width="956" height="366" data-path="assets/plugins/connect-lovable/lovable-tab.png" />

**Step 5:** You will see the full **AI Prompt** for adding the Ticket Spot event widget. Click the **copy** icon to copy the prompt exactly as shown—this is the text you will paste into Lovable.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/copy-icon.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=dd67c5b55dff53b03d1a33f072074c19" alt="copy-icon" width="1209" height="756" data-path="assets/plugins/connect-lovable/copy-icon.png" />

> **Note**: Make sure you copy the prompt exactly as it appears. Do not edit or change anything, as Lovable relies on the full prompt to embed the widget correctly.

**Step 6:** Log in to your **Lovable** account and open the project where you want to add the Ticket Spot widget.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/sign-in.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=dabd27394520935bc2d9f817670e64c8" alt="sign-in" width="1731" height="823" data-path="assets/plugins/connect-lovable/sign-in.png" />

> **Note**: If you don’t have a **[Lovable account](https://lovable.dev/signup)** yet, you’ll need to create one first. You can sign up directly on the Lovable website and follow their onboarding steps to start a new project.

**Step 7:** Start a **new chat** in Lovable and describe the type of event page you want to create.\
For example: `Create a landing page for an outdoor movie event.`

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/describe-event.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=ef25842d8a760bcc8fc4452d441b5fc0" alt="describe-event" width="1214" height="687" data-path="assets/plugins/connect-lovable/describe-event.png" />

After describing the page, paste the Ticket Spot AI prompt into the chat to embed the widget.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/copy-prompt.gif?s=c64fa733f2a0326d6f6c62a561509dc2" alt="copy-prompt" width="848" height="536" data-path="assets/plugins/connect-lovable/copy-prompt.gif" />

Press Enter to run the prompt. Lovable will generate your event page and automatically embed the Ticket Spot widget based on the AI prompt you provided.\
Scroll down to your generated page to see the Ticket Spot widget embedded automatically.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/click-enter-btn.gif?s=1dceb1410aa8a5239c9d3eea6c30d6b5" alt="click-enter-btn" width="848" height="536" data-path="assets/plugins/connect-lovable/click-enter-btn.gif" />

## Checkout

Let’s go ahead and **checkout** the event by **purchasing** a ticket directly through the embedded Ticket Spot widget. Select your ticket, enter the required buyer details, and complete the checkout process.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/checkout.gif?s=26e62414d2bac38a4bcab4d0ef06c2e5" alt="checkout" width="848" height="536" data-path="assets/plugins/connect-lovable/checkout.gif" />

After the purchase is complete, you can **view** and **download** your ticket and receipt and even add the ticket to your **Apple Wallet** for quick access at the event.

<img src="https://mintcdn.com/ticketspot/501Gc8ayz4Inb7GL/assets/plugins/connect-lovable/view-dwlnd-ticket.png?fit=max&auto=format&n=501Gc8ayz4Inb7GL&q=85&s=ef4bc7ae27ab15280a29cee46539c322" alt="view-dwlnd-ticket" width="813" height="476" data-path="assets/plugins/connect-lovable/view-dwlnd-ticket.png" />

## Explore Ticket Spot Features

**Ticket Spot** provides a complete set of tools to help you manage every part of your event—from attendee tracking to branding and analytics. Below is a quick overview of the key features you can access from your Ticket Spot dashboard:

### Attendee Dashboard

View all attendees, monitor ticket sales, update attendee statuses, export attendee data, and resend confirmation emails if needed.\
Learn more about [Managing Attendees →](../attendee-management/managing-attendees)

### Design & Branding Customization

Customize ticket receipts, ticket passes, colors, labels, and email layouts. You can also remove Ticket Spot branding for a fully white-labeled experience.\
Learn more about:

[Brand Design →](../branding-and-design/brand-design)

[Ticket & Receipt Design →](../branding-and-design/ticket-and-receipt-attachment-design)

[Attendee Communication Design →](../branding-and-design/attendee-communication-design)

### Analytics Dashboard

Track ticket sales performance, check-in activity, arrival patterns, and see overall event trends in real time.\
Learn more about [Analytics Overview →](../analytics/analytics-overview)

These tools ensure you have everything you need to run smooth, efficient, and well-designed events directly from your Lovable website.
