SeggWat - Collect Feedback

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.

Note

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:

html

<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-keystringrequired

Your unique project identifier from the SeggWat dashboard

Optional Attributes

data-button-positionstringdefault:"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:

html

data-button-position="right-side"

data-button-textstringdefault:"Contact Us"

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

Example:

html

data-button-text="Get in Touch"

data-colorstringdefault:"#2563eb"

Hex color code for the button and form accent elements

The widget automatically generates hover states.

Example:

html

data-color="#10b981"

data-show-subjectbooleandefault:"false"

Show an optional subject field in the contact form

When enabled, adds a "Subject" text input between the email and message fields.

Example:

html

data-show-subject="true"

data-languagestringdefault:"auto-detect"

Language code for the widget UI

Supported languages: en, de, sv

Falls back to English if unsupported. Auto-detects from browser if not specified.

data-versionstring

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

data-show-powered-bybooleandefault:"true"

Show or hide the "Powered by SeggWat" branding in the modal footer

Set to false, 0, or no to hide the branding.

data-api-urlstringdefault:"auto-detect"

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

Examples

Basic Usage

html

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

With Subject Field

html

<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

html

<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

html

<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)

html

<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

html

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

Full Configuration

html

<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:

javascript

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

Warning

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:

javascript

SeggwatContact.open();

Close the contact form:

javascript

SeggwatContact.close();

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

javascript

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:

json

{
  "project_key": "uuid",
  "name": "Jane Smith",
  "email": "jane@example.com",
  "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:

html

<!-- 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-rating.js"
        data-project-key="your-project-key"></script>

Tip

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:

css

/* 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

Contact Widget

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

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