JavaScript Search Widget Guide

Want to embed a Domainiac-powered search box directly on your website? I'm Dom, and this guide will walk you through our lightweight, configurable JavaScript search widget. It's the easiest way to bring the power of Domainiac's AI search to your own platform.

Why Use the Search Widget?

While our URL parameters are great for simple links, the search widget provides a more seamless, integrated experience for your users. Instead of sending them to our site, you can capture their ideas directly on yours.

Easy to Install

Just copy and paste two small snippets of code. No complex setup or build process required.

Fully Configurable

Control everything from the placeholder text to the TLDs being searched, right from your HTML.

Lightweight & Secure

The widget is a single, self-contained script with namespaced styles, ensuring it won't interfere with your existing site.

Installation: A Simple Two-Step Process

Getting the widget running on your site is incredibly simple.

Step 1: Add the Placeholder Div (Optional)

Place this <div> element in your HTML where you want the search box to appear. If you omit this step, the widget will automatically create a div and render itself right where you placed the script tag.

Step 2: Add the Script Tag

Place this <script> tag just before the closing </body> tag of your page. This is where all the configuration happens.

Full Configuration Guide

You can customize the widget's appearance and behavior using data- attributes on the script tag.

Widget-Specific Controls

These attributes control the look and feel of the search box itself.

data-placeholder
Sets the placeholder text inside the search input. (Default: "Describe your idea...")
data-button-text
Sets the text on the search button. (Default: "Search Domains")
data-target-div
(Optional) If you don't want to use id="domainiac-search-widget" for your placeholder, you can specify a different ID here.
data-show-keywords
Set this to true to display an advanced keyword input field, allowing users to add, remove, and manage keywords with "required" and "must be first" states.

Generic URL Parameters

This is where the real power lies. The widget will generically convert almost any data- attribute into a URL parameter. For a full list of available parameters and their functions, please see our complete URL Parameter Integration Guide. Simply take any parameter from that guide and add data- in front of it.

data-tlds becomes &tlds=...
data-smash-names becomes &smashNames=...
data-mode becomes &mode=...

Interactive Widget Builder

Use the builder below to customize your widget. Adjust the settings, see a live preview, and copy the generated code snippet to embed on your site.

Live Preview

Generated Code

Copy the code below and paste it into your HTML.



  Search powered by Domainiac™

Examples in Action

Example 1: TLD Registrar Integration

This is the perfect setup for a TLD registrar (like .hiphop or .music) who wants to power their site's search. It locks the search to their TLD and provides a custom placeholder.

HTML Setup for Registrar

Example 2: Blog Integration

A blog author writing about AI startups can embed a widget that pre-configures the search for relevant TLDs and keywords, using the add_settings mode to respect any of the user's existing filters.

HTML Setup for Blog

Customizing the Appearance (CSS)

While the data- attributes control the widget's functionality, you might want to customize its look and feel to match your site's branding. You can easily override the default styles with your own CSS.

Recommended Method: CSS Specificity

The best way to apply your own styles is to wrap the widget's placeholder <div> in your own container and use that to create more specific CSS selectors. This ensures your styles take precedence without breaking the widget's core layout.

Step 1: Wrap the placeholder

Step 2: Write more specific CSS

By prefixing the widget's class names with your wrapper's ID, your rules will safely override the defaults.

/* Change the button's background and text color */
#my-custom-widget-styles .domainiac-widget-button {
  background-color: #e83e8c; /* A custom pink color */
  color: #ffffff;
}

#my-custom-widget-styles .domainiac-widget-button:hover {
  background-color: #d1307b; /* A darker pink for hover */
}

/* Change the textarea's border color when focused */
#my-custom-widget-styles .domainiac-widget-textarea:focus {
  border-color: #e83e8c;
  box-shadow: 0 0 4px rgba(232, 62, 140, 0.5);
}

Targetable CSS Classes

Here are the classes you can target to style the different parts of the widget:

.domainiac-widget-container
The main container for the entire widget.
.domainiac-widget-horizontal
A modifier class added to the container when using the horizontal layout.
.domainiac-inputs-wrapper
In horizontal mode with keywords enabled, this div wraps the description and keyword inputs.
.domainiac-widget-textarea
The text input area.
.domainiac-widget-button
The search button.
.domainiac-keywords-container
The container for the keyword pills and input.
.domainiac-keyword-pill
An individual keyword pill.

You can also target pseudo-classes like :hover on the button or :focus on the textarea.

Ready to Embed?

That's everything you need to know to get started with the Domainiac Search Widget. It's a powerful way to bring our AI search directly to your audience. If you have any questions, don't hesitate to reach out.

Domainiac^™