Popup Widget

Add a floating contact form to any website with a single script tag. No coding required.

What is the widget?

The Flowqen widget is a lightweight JavaScript snippet you embed on your website. It shows a floating button in the corner of the page. When a visitor clicks it, a popup contact form appears. Submissions go straight to your Flowqen dashboard — no backend work needed.

Add one
script tag

Visitor clicks
floating button

Submission lands
in your dashboard

Quick start

Copy and paste this snippet before your closing </body> tag.

index.html

<script
  src="https://flowqen.com/widget.js"
  data-form-id="YOUR_FORM_ID"
  defer>
</script>

Replace YOUR_FORM_ID with the form ID from your Flowqen dashboard. That's it — a floating button will appear on your site.

Using with React / Next.js

Add the widget using a useEffect hook. The script loads once when the component mounts.

page.tsx

"use client";
import { useEffect } from "react";

export default function MyPage() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://flowqen.com/widget.js";
    script.setAttribute("data-form-id", "YOUR_FORM_ID");
    script.setAttribute("data-color", "#E14E3A");
    script.setAttribute("data-title", "Contact Us");
    script.defer = true;
    document.body.appendChild(script);
    return () => { document.body.removeChild(script); };
  }, []);

  return <div>Your page content</div>;
}

Using with Vue

App.vue

<script setup>
import { onMounted, onUnmounted } from "vue";

let script;
onMounted(() => {
  script = document.createElement("script");
  script.src = "https://flowqen.com/widget.js";
  script.setAttribute("data-form-id", "YOUR_FORM_ID");
  script.setAttribute("data-color", "#E14E3A");
  script.defer = true;
  document.body.appendChild(script);
});
onUnmounted(() => {
  if (script) document.body.removeChild(script);
});
</script>

<template>
  <div>Your page content</div>
</template>

Using with Angular

app.component.ts

import { Component, OnInit, OnDestroy } from "@angular/core";

@Component({ selector: "app-root", template: "<div>Your content</div>" })
export class AppComponent implements OnInit, OnDestroy {
  private script?: HTMLScriptElement;

  ngOnInit() {
    this.script = document.createElement("script");
    this.script.src = "https://flowqen.com/widget.js";
    this.script.setAttribute("data-form-id", "YOUR_FORM_ID");
    this.script.setAttribute("data-color", "#E14E3A");
    this.script.defer = true;
    document.body.appendChild(this.script);
  }

  ngOnDestroy() {
    if (this.script) document.body.removeChild(this.script);
  }
}

WordPress / Shopify / Wix:For no-code platforms, just paste the HTML script tag into your site's footer HTML section. Most platforms have a "Custom Code" or "Footer Scripts" setting where you can add it.

Configuration options

Attribute	Default	Description
data-form-id	—	Required. Your Flowqen form ID.
data-color	#E14E3A	Accent color for the button, submit button, and focus rings.
data-title	Contact Us	Heading displayed at the top of the popup.
data-description	—	Optional subtext shown below the title.
data-position	right	Where the button sits: `right` or `left`.
data-fields	Name, Email, Message	JSON array of field objects (see below).

Custom fields

Pass a JSON array to data-fields to define your own form fields. Each object supports these keys:

name

Field name (used as the JSON key on submit)

type

text, email, tel, url, number, date, time, textarea, or select

label

Label shown above the field

required

true or false

placeholder

Placeholder text inside the input

options

Array of options (select type only)

Example with custom fields

index.html

<script
  src="https://flowqen.com/widget.js"
  data-form-id="YOUR_FORM_ID"
  data-color="#E14E3A"
  data-title="Contact Us"
  data-description="We'd love to hear from you"
  data-fields='[
    {"name":"name","type":"text","label":"Name","required":true,"placeholder":"Your name"},
    {"name":"email","type":"email","label":"Email","required":true,"placeholder":"you@example.com"},
    {"name":"phone","type":"tel","label":"Phone","required":false,"placeholder":"+1 (555) 000-0000"},
    {"name":"message","type":"textarea","label":"Message","required":true,"placeholder":"Your message..."}
  ]'
  defer>
</script>

Select dropdown example

Use type: "select" with an options array to show a dropdown.

index.html

<script
  src="https://flowqen.com/widget.js"
  data-form-id="YOUR_FORM_ID"
  data-title="Get a Quote"
  data-fields='[
    {"name":"name","type":"text","label":"Name","required":true},
    {"name":"email","type":"email","label":"Email","required":true},
    {"name":"plan","type":"select","label":"Plan","required":true,
      "placeholder":"Choose a plan...",
      "options":["Starter","Pro","Enterprise"]},
    {"name":"message","type":"textarea","label":"Details","required":false}
  ]'
  defer>
</script>

Options can be simple strings like "Starter" or objects like {"value":"starter","label":"Starter Plan"}.

Custom colors

Set data-color to any hex color to match your brand.

Flowqen Red

#E14E3A

Blue

#2563eb

Green

#16a34a

Purple

#7c3aed

index.html

<script
  src="https://flowqen.com/widget.js"
  data-form-id="YOUR_FORM_ID"
  data-color="#7c3aed"
  defer>
</script>

Position options

The button defaults to the bottom-right corner. Set data-position="left" to place it on the bottom-left instead.

Bottom-right (default)

data-position="right"

Bottom-left

data-position="left"

Full example with all options

Here's a complete example using every configuration option.

index.html

<script
  src="https://flowqen.com/widget.js"
  data-form-id="abc-123-def-456"
  data-color="#2563eb"
  data-title="Get in Touch"
  data-description="Fill out the form and we'll get back to you within 24 hours."
  data-position="right"
  data-fields='[
    {"name":"name","type":"text","label":"Full Name","required":true,"placeholder":"Jane Doe"},
    {"name":"email","type":"email","label":"Email","required":true,"placeholder":"jane@company.com"},
    {"name":"phone","type":"tel","label":"Phone","required":false,"placeholder":"+1 (555) 000-0000"},
    {"name":"department","type":"select","label":"Department","required":true,
      "placeholder":"Select department...",
      "options":["Sales","Support","Billing","Other"]},
    {"name":"message","type":"textarea","label":"Message","required":true,"placeholder":"How can we help?"}
  ]'
  defer>
</script>

Popup widget showing a floating button in the corner and the open contact form popup

Works everywhere

The widget is a single, self-contained JavaScript file with zero dependencies. It works on any website.

Plain HTML

Any static site

WordPress

Theme or plugin

Shopify

theme.liquid

React / Next.js

public/ or <Script>

Tips

Use the defer attribute so the widget loads after your page content
All CSS is injected inline — no extra stylesheet to load
Class names are prefixed with rwn- to avoid conflicts with your site's styles
A hidden honeypot field is included to block spam bots
The widget is under 8 KB — it won't slow down your site