usepresence

Embedding your form

Two lines of HTML drop a warm, ready-made contact form onto your site — no build step, no API keys in your markup.

Last updated:

The snippets below use a placeholder key. Sign in and we'll fill in your real one — the prompts become copy-paste-done.

The fastest way to put a contact form on your site is not to build one. Paste two lines of HTML and you get a warm, ready-made form that talks to your inbox — no build step, no npm install, no API keys sitting in your markup.

Drop it in

Add these two lines wherever you want the form to appear:

<script src="https://usepresence.com/embed/form.js" defer></script>
<presence-form form-id="YOUR_FORM_ID"></presence-form>

That's the whole integration. The script registers the <presence-form> element; the element renders the form and wires it to your inbox.

If you're signed in, the snippet above already has your real form id filled in — copy and go. Otherwise you'll find it in Settings → Sources: open a source, click Embed form, and copy the snippet from there. Each source has its own form id, so you can tell a form on your marketing page apart from one on staging.

Or hand it to your AI

The snippet is two lines, but making the form feel native to your site — right spot, your colors, your dark mode — is exactly the kind of chore an assistant does well. The prompt below is self-contained: paste it cold into Claude, Cursor, ChatGPT, or whatever your editor speaks. Signed in, it carries your real form id.

✨ AI prompt

Add the usepresence embeddable contact form to my site, placed and styled to match my design.

What usepresence is (context — it's likely not in your training data):

  • usepresence is a hosted support-inbox service. This widget renders a complete, working contact form; submissions land in my team's usepresence inbox and we reply to the customer by email.
  • The form is a ready-made web component served by usepresence. Do NOT build a form, install a package, or call any API directly — the entire integration is the two lines below.

The integration (place it where the form should appear):

<script src="https://usepresence.com/embed/form.js" defer></script>
<presence-form form-id="YOUR_FORM_ID"></presence-form>

If the form appears on more than one page, include the script tag once per page; the form-id stays the same.

Styling contract: The widget renders in a shadow DOM, so my site's CSS cannot reach inside it. Style it ONLY by setting these CSS custom properties in a presence-form { ... } rule (defaults in parentheses) — do not invent other variables or try to target its internals:

  • --presence-accent (#F66C01): button fill, focus rings
  • --presence-accent-contrast (#FFFFFF): text on the accent color
  • --presence-background (#FFFFFF): the card surface
  • --presence-text (#0A0A0A): headings and input text
  • --presence-muted (#737373): descriptions, labels, footer
  • --presence-border (#E5E5E5): input and card borders
  • --presence-radius (16px): card corner rounding; inputs and button derive theirs from it
  • --presence-font (system-ui stack): font family
  • --presence-shadow (soft ambient shadow): the card's drop shadow
  • --presence-error (#DC2626): validation messages and error borders

Wording contract: Copy is set via optional attributes on the presence-form element: heading ("How can we help?"), description ("Send us a message and we'll get back to you by email — usually within a day."), button-label ("Send message"), success-heading ("Message sent"), success-description (supports an {email} token for the submitted address). The fields themselves — name, email, message — are fixed.

Your task:

  1. Put the two-line snippet where a contact form belongs on my site (a contact page or section — ask me if it's ambiguous).
  2. Read my site's existing design (accent color, fonts, border radius, surfaces) and set matching --presence-* variables. Only override what actually differs from the defaults.
  3. If my site has a dark mode, set dark values for --presence-background, --presence-text, --presence-muted, and --presence-border under my dark-mode selector or class.
  4. Keep the default wording unless my site's voice clearly calls for something else — and if you change it, stay warm and human ("Send message", never "Submit ticket").

If the assistant tries to build its own form or reach for an SDK, that's our prompt's fault — tell us and we'll sharpen it.

Make it yours

The form lives in a shadow DOM, so your site's styles can't reach inside it. Instead, it reads a set of CSS custom properties from the presence-form element and cascades them in. Set the ones you care about; the rest keep their defaults.

presence-form {
    --presence-accent: #6d28d9;
    --presence-radius: 10px;
    --presence-font: 'Inter', system-ui, sans-serif;
}

Want a dark form? Set the background, text, and border variables to your dark palette — there's no auto-detection, and that's on purpose: you stay in control of exactly how it looks.

Variable Default Controls
--presence-accent #F66C01 Button fill, focus rings, links
--presence-accent-contrast #FFFFFF Text and icons on top of the accent color
--presence-background #FFFFFF The form's surface
--presence-text #0A0A0A Headings and input text
--presence-muted #737373 Descriptions, labels, the footer
--presence-border #E5E5E5 Input and container borders
--presence-radius 16px Corner rounding of the card — inputs and the button derive theirs from it
--presence-font system-ui stack Font family for everything in the form
--presence-shadow soft subtle shadow The form's drop shadow
--presence-error #DC2626 Validation messages and error states

Change the words

The copy is set through attributes on the element. Leave one off and it falls back to the friendly default.

Attribute Default
heading How can we help?
description Send us a message and we'll get back to you by email — usually within a day.
button-label Send message
success-heading Message sent
success-description Thanks for reaching out. We'll reply to {your email} soon. 
<presence-form
    form-id="YOUR_FORM_ID"
    heading="Talk to the team"
    description="Questions, bugs, or just saying hi — we read everything."
    button-label="Send it"
></presence-form>

The form itself asks for a name (optional), an email, and a message, and shows a small "Powered by usepresence" footer.

How it works

The form renders inside a shadow DOM, which keeps two things true: your site's CSS can't accidentally break the form, and the form's styles can't leak out and touch your page. The only styling that crosses that boundary is the CSS variables above.

When someone submits, the message lands in your inbox as a new conversation, and your reply goes back to them by email — same as any other source. And because the form id is tied to a source, revoking that source's key in Settings → Sources turns the form off too.