Contact Widget

Overview

The contact widget provides a floating button that opens a modal contact form. Visitors can submit their name, email, an optional subject, and a message — all without leaving your page. Messages appear in your SeggWat dashboard for review and follow-up.

The contact widget uses the same modular architecture as the feedback and rating widgets. The core library loads only once when multiple widgets are on the same page.

Quick Start

Add the contact widget to your page with a single script tag:

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"></script>

A “Contact Us” button appears at the bottom-right of the page. Clicking it opens a modal with a contact form.

Configuration Options

Customize the widget’s appearance and behavior using data attributes:

Required Attributes

data-project-key

string

required

Your unique project identifier from the SeggWat dashboard

Optional Attributes

data-button-position

string

default:"bottom-right"

Button layout and position

bottom-right (default) — Horizontal button with icon and text at bottom-right
right-side — Vertical text button on right side of screen
icon-only — Round icon-only button at bottom-right (compact design)

Example:

data-button-position="right-side"

data-button-text

string

default:"Contact Us"

Custom text for the button label. Translated automatically based on language if not set.Example:

data-button-text="Get in Touch"

data-color

string

default:"#2563eb"

Hex color code for the button and form accent elementsThe widget automatically generates hover states.Example:

data-color="#10b981"

data-show-subject

boolean

default:"false"

Show an optional subject field in the contact formWhen enabled, adds a “Subject” text input between the email and message fields.Example:

data-show-subject="true"

data-language

string

default:"auto-detect"

Language code for the widget UISupported languages: en, de, svFalls back to English if unsupported. Auto-detects from browser if not specified.

data-version

string

Track contact submissions against specific application versions (e.g., 1.2.3, v2.0.0-beta)

data-show-powered-by

boolean

default:"true"

Show or hide the “Powered by SeggWat” branding in the modal footerSet to false, 0, or no to hide the branding.

data-api-url

string

default:"auto-detect"

Override the API endpoint (useful for self-hosted or staging environments)

Examples

Basic Usage

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"></script>

With Subject Field

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-show-subject="true"></script>

Custom Button Text

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-button-text="Get in Touch"
        data-color="#10b981"></script>

Right-Side Position

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-button-position="right-side"
        data-button-text="Contact"></script>

Icon-Only (Compact)

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-button-position="icon-only"></script>

German Language

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-language="de"></script>

Full Configuration

<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-button-position="bottom-right"
        data-button-text="Message Us"
        data-color="#6366f1"
        data-show-subject="true"
        data-language="en"
        data-version="2.1.0"
        data-show-powered-by="false"></script>

JavaScript API

The widget exposes a global API for programmatic control:

Set User ID

Associate contact submissions with specific users:

if (window.SeggwatContact) {
  SeggwatContact.setUser('user_12345');
}

Only pass user IDs, not personally identifiable information (PII) like emails or names. This maintains GDPR compliance.

Validation:

Max 255 characters
Alphanumeric characters, hyphens, and underscores only
Examples: user_12345, cust-abc-123, USR_98765

Programmatically open the contact form:

SeggwatContact.open();

Close the contact form:

SeggwatContact.close();

Reset the widget to its initial state (same as close):

SeggwatContact.reset();

Form Fields

The contact form includes the following fields:

Field	Required	Max Length	Validation
Name	Yes	200 chars	Must not be empty
Email	Yes	320 chars	Must contain `@` and `.`
Subject	No	200 chars	Optional (enable with `data-show-subject`)
Message	Yes	2000 chars	Minimum 3 characters

When validation fails, the invalid field is automatically focused.

How It Works

The script loads and creates a floating button
Core library loads automatically if not already present
User clicks the button to open the modal
User fills in the contact form
Form validates on submit
Data submits to POST /api/v1/contact/submit
Success message shown with “We’ll get back to you soon”
Modal can be closed

API Endpoint

The widget submits contact messages to:

POST /api/v1/contact/submit

Payload:

{
  "project_key": "uuid",
  "name": "Jane Smith",
  "email": "[email protected]",
  "message": "I'd like to learn more about your enterprise plan.",
  "path": "/pricing",
  "subject": "Enterprise inquiry",
  "version": "1.2.3"
}

subject — Only included if data-show-subject is enabled and the field is filled
version — Only included if data-version is set
path — Automatically set to the current page pathname

Response: 200 OK on success

Combining with Other Widgets

The contact widget works alongside the feedback button and rating widgets. The core library loads only once:

<!-- Feedback button (floating) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-feedback.js"
        data-project-key="your-project-key"></script>

<!-- Contact form (floating) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-contact.js"
        data-project-key="your-project-key"
        data-button-position="icon-only"></script>

<!-- Star rating (inline) -->
<script src="https://seggwat.com/static/widgets/v1/seggwat-star.js"
        data-project-key="your-project-key"></script>

When using multiple floating widgets, consider using icon-only position for one to avoid overlapping buttons.

Use Cases

SaaS Products

Let users reach out without leaving your app. Collect feature requests, sales inquiries, and support questions.

Documentation Sites

Offer a direct contact option when self-service content isn’t enough. Capture context about which page prompted the message.

Landing Pages

Convert visitors into leads with a low-friction contact form. No separate contact page needed.

Support Portals

Provide a quick way for users to reach your team when they need help beyond what’s in your knowledge base.

Styling

The widget uses the SeggWat design system and adapts to light/dark mode automatically. CSS Classes (for custom styling): Button:

.contact-button — Base button
.contact-button-horizontal — Bottom-right layout
.contact-button-vertical — Right-side layout
.contact-button-icon-only — Round icon-only layout

Modal:

.seggwat-contact-overlay — Full-screen backdrop
.seggwat-contact-modal — Modal container
.seggwat-contact-modal-header — Header section
.seggwat-contact-modal-body — Form fields container
.seggwat-contact-modal-footer — Button section

Form Elements:

.seggwat-contact-field — Field wrapper
.seggwat-contact-input — Text input
.seggwat-contact-textarea — Message textarea
.seggwat-contact-btn — Button base
.seggwat-contact-btn-cancel — Cancel button
.seggwat-contact-btn-submit — Submit button

Messages:

.seggwat-contact-message — Success/error container
.seggwat-contact-powered-by — Footer branding link

Example custom styling:

/* Wider modal */
.seggwat-contact-modal {
  max-width: 600px !important;
}

/* Taller message textarea */
.seggwat-contact-textarea {
  min-height: 150px !important;
}

Accessibility

The contact widget is built with accessibility in mind:

ARIA labels on the floating button
Focus management (auto-focus on name field when modal opens)
Escape key to close the modal
Click outside modal to close
Semantic HTML labels for all form fields
Required field indicators
Disabled state during submission to prevent double-submit

Troubleshooting

Widget not appearing

Messages not submitting

Common causes:

Check browser Network tab for failed API calls
Verify you’re viewing the correct project in dashboard
Rate limiting (10 second cooldown between submissions)
Check for CORS issues in console
Ensure all required fields are filled correctly

Modal not opening or closing

Translations not loading

Check:

Language code is valid: en, de, or sv
Network tab shows translation file loading
Falls back to English if translation file fails
Custom data-api-url points to correct server

Next Steps

Feedback Button

Add a feedback button for detailed bug reports and feature requests

Star Rating

Collect granular satisfaction ratings with stars or smiley faces

Internationalization

Configure multi-language support for your widgets

API Reference

Explore the SeggWat API for custom integrations

General

Widgets

Features

Overview

Quick Start

Configuration Options

Required Attributes

Optional Attributes

Examples

Basic Usage

With Subject Field

Custom Button Text

Right-Side Position

Icon-Only (Compact)

German Language

Full Configuration

JavaScript API

Set User ID

Reset Widget

Form Fields

How It Works

API Endpoint

Combining with Other Widgets

Use Cases

SaaS Products

Documentation Sites

Landing Pages

Support Portals

Styling

Accessibility

Troubleshooting

Next Steps

Feedback Button

Star Rating

Internationalization

API Reference

General

Widgets

Features

​Overview

​Quick Start

​Configuration Options

​Required Attributes

​Optional Attributes

​Examples

​Basic Usage

​With Subject Field

​Custom Button Text

​Right-Side Position

​Icon-Only (Compact)

​German Language

​Full Configuration

​JavaScript API

​Set User ID

​Open Modal

​Close Modal

​Reset Widget

​Form Fields

​How It Works

​API Endpoint

​Combining with Other Widgets

​Use Cases

SaaS Products

Documentation Sites

Landing Pages

Support Portals

​Styling

​Accessibility

​Troubleshooting

​Next Steps

Feedback Button

Star Rating

Internationalization

API Reference

Overview

Quick Start

Configuration Options

Required Attributes

Optional Attributes

Examples

Basic Usage

With Subject Field

Custom Button Text

Right-Side Position

Icon-Only (Compact)

German Language

Full Configuration

JavaScript API

Set User ID

Open Modal

Close Modal

Reset Widget

Form Fields

How It Works

API Endpoint

Combining with Other Widgets

Use Cases

Styling

Accessibility

Troubleshooting

Next Steps