How to Add a Flodesk Popup or Inline Form in AI Builders (Bolt & Lovable)

AI website builders like Bolt and Lovable make it easy to create professional websites without touching code. You can still embed your Flodesk popup or inline forms directly into these tools using the AI-friendly prompt.

This guide gives you a 30-second Quick Start plus detailed, platform-specific instructions for Bolt and Lovable.

1. In Flodesk:

   • Create or open your popup or inline form.

   • Copy the AI-friendly prompt from Embed settings.

2. In your AI Builder (Bolt or Lovable):

   • Open the project/page where you want the form.

   • Paste the AI-friendly prompt into the chat/instruction panel.

   • (For inline forms) Add: “Place above [section name].”

3. Publish your site to see it live. (Forms may not show in preview.)
   

Note: Any design changes made in Flodesk will automatically sync to your site.

• Form misplaced → Add: “Place this independently, not inside an existing section.”

• Style mismatch → Add: “Use Flodesk’s original style.”

• Extra text/headings → Add: “Remove the heading and body text. Only render the Flodesk form.”

Step 1 — Prepare Your Flodesk Form

1. Log in to Flodesk.

2. Create or select a popup or inline form.

3. In Embed settings, choose the AI-friendly prompt.
   

Step 2 — Open Your Project in Bolt

1. Open the Bolt project where the form should appear.

2. Switch to the chat/prompt interface.

Step 3 — Add the Flodesk AI-Friendly Prompt

1. Paste the prompt into Bolt’s chat panel.

2. For inline forms, specify placement (e.g., “Place above the Testimonials section”).

Step 4 — Preview and Adjust

• Preview in Bolt (some scripts only run after publishing).

• Adjust positioning by refining your prompt.

Bolt-Specific Troubleshooting

• Animations like “slide down” can break the form's appearance.

• If you embed inline forms, Bolt may insert them inside existing layout sections, distorting spacing or wrapping them in extra containers.
  To fix this, add this prompt: "Please do not add this form inside an existing section. Place it independently." or  “Do not match the landing style. Use Flodesk’s original style.”

Step 1 — Prepare Your Flodesk Form

1. Log in to Flodesk.

2. Create or select a popup or inline form.

3. In Embed settings, choose the AI-friendly prompt.
   
   

   

Step 2 — Open Your Project in Lovable

1. Go to the Design Section in your project.

2. Open the page where the form should appear.

Step 3 — Add the Flodesk AI-Friendly Prompt

1. Paste the prompt into Lovable’s chat panel.

2. For inline forms, specify placement (e.g., “Place above the Testimonials section”).

Step 4 — Preview and Adjust

• Preview in Lovable (some scripts only run after publishing).

• Adjust placement or styling by refining your prompt.

Lovable-Specific Troubleshooting

• Lovable sometimes tries to animate the modal automatically (e.g., with delay or fade-in effects), which may interfere with the Flodesk logic.

• First attempts may not work; Lovable sometimes adds headings or styling around the form.
  To fix this: “Remove the heading and body text. Only render the Flodesk form.”
  

Pro Tip: The more precise your instructions, the better AI builders will place and style your Flodesk form.