Smart Discovery

Smart Discovery (formerly Modal configuration) controls when and how the Dialog assistant pops up on its own, on any page of your store. This is different from the product-question block: instead of waiting for a visitor to engage on a product page, you proactively surface the assistant — on a URL you choose, after a load or scroll trigger, with your own copy and suggested questions.

Each configuration renders on one of two surfaces:

• the Modal — a welcome window with suggestions,
• the AI Bar — a discreet floating search bar, which can also carry a personal shopper button.

You can run several Smart Discovery configurations in parallel, each targeting a different URL pattern with its own surface, trigger, and content.

Where you configure it

Everything is self-serve from the Dialog dashboard, under Smart Discovery in the navigation:

https://app.askdialog.com/organization/{your-org-slug}/modal-configs

From there you create, edit, and delete configurations. Each one is a row in the table; Create Smart Discovery opens the form.

How a configuration works

Each configuration ties together:

• a surface — Modal or AI Bar,
• a page URL pattern — where it is eligible to appear,
• a trigger event — what makes it appear (page load or scroll),
• a delay — how long to wait after the trigger,
• the content — copy and suggested questions (and, on the AI bar, an optional personal shopper button).

When a visitor lands on a matching URL and the trigger fires, the surface opens after the delay. A configuration whose URL pattern matches nothing never appears.

Modal

Configuration fields

Field	What it does
Description (required, translatable)	Internal note on when and why this modal should appear. Minimum 5 characters. Not shown to visitors.
Page URL Pattern (Regex)	Regex matched against the page path. Anchored automatically (^pattern$). Examples: .* (all pages), /products/.* (product pages), /product/[0-9]+ (numeric IDs). A live tester lets you paste a URL and check whether it matches.
When should the modal appear?	The trigger event: On Page Load or On Scroll.
Delay before showing modal	Wait time after the trigger before the modal opens: 0s, 5s, 10s, 15s, 30s, or 60s. 0s = immediately.
Assistant Name (translatable)	Name shown on the modal (e.g. Shopping Assistant, Style Guide).
Input Placeholder (translatable)	Placeholder text in the modal’s question input.
Suggested Questions (2, required, translatable)	Two questions surfaced to the visitor when the modal opens, as quick entry points into the conversation.

Behavior notes

• First time vs. afterwards. The first time a visitor triggers the modal, it opens fully. Once they’ve seen it, later triggers surface a smaller bookmark entry point instead of re-popping the full modal — so it isn’t intrusive on every page.
• No double-open. If the assistant is already open (modal, chat, bookmark, or splash), the trigger is ignored.
• Path, not full URL. The pattern is tested against the path (e.g. /products/shoe), not the query string or domain.
• Anchored regex. The pattern is wrapped as ^pattern$, so it must match the whole path. Use .* segments for partial matches (e.g. /products/.*).

AI Bar

The AI Bar is the second Smart Discovery surface: a discreet floating search bar instead of a full welcome window. It uses the same targeting mechanics as the modal — URL pattern, trigger event (page load or scroll), and delay — but with a lighter footprint: the visitor sees a compact bar they can expand into the full assistant conversation.

Because the bar is more minimal, its content differs from the modal:

Field	What it does
Input Placeholder (translatable)	Placeholder text in the bar’s question input.
Suggested Questions (optional, translatable)	On the AI bar, suggested questions are optional (they are required on the modal).

The modal-only fields (assistant name, description message) do not apply to the AI bar.

Personal shopper (AI bar only)

The AI bar can carry a personal shopper button. When enabled, the expanded bar shows a button that opens the selected Personal Shopper directly — a one-click entry point from the bar into the right guided flow.

Enable the Personal shopper toggle in the form, then fill in:

Field	What it does
Personal shopper (required when enabled)	Select which personal shopper the button launches.
Button label (translatable)	The text on the button (e.g. Start the personal shopper).

This section only appears when the configuration’s surface is AI Bar.

Multi-language

Translatable fields (description, assistant name, input placeholder, suggested questions, personal shopper button label) are edited per locale via the language selector at the top of the form. On the primary locale, Translate to all languages AI-fills every other enabled locale from the current value in one click.

Advanced CSS overrides

Not an official customization surface

Custom CSS is technically doable on the integration side, but it is not an official, stable customization system exposed in the config. The class names below are the supported override hooks; anything beyond them targets internal markup that can change without notice. Keep custom CSS minimal and re-test after widget updates.

The modal renders with the rest of the Dialog widget, so the same override classes apply. Override them from the Shopify Custom CSS field, or your own stylesheet on custom installs:

Class	Target
.dialog-input	The question input
.dialog-suggestions-item	Suggested questions
.dialog-add-to-cart-button	Add-to-cart button
.dialog-human-message	Customer messages
.dialog-ai-message	AI responses
.dialog-feedback-button	Feedback buttons

Example — brand-aligned modal

/* Input and suggestions */
.dialog-input {
  border-color: #4f46e5;
  border-radius: 12px;
}
.dialog-suggestions-item {
  border-color: #c7d2fe;
  background-color: #eef2ff;
}

/* Conversation bubbles */
.dialog-human-message {
  background-color: #4f46e5;
  color: #ffffff;
}
.dialog-ai-message {
  background-color: #f8fafc;
}
.dialog-human-message,
.dialog-ai-message * {
  font-size: 15px !important;
  line-height: 1.5;
}

/* Actions */
.dialog-add-to-cart-button {
  background-color: #16a34a;
  border-radius: 999px;
}
.dialog-feedback-button {
  border-color: #f59e0b;
}

Tips for safe overrides

• Scope tightly. Override only the documented classes above. Targeting deeper internal selectors is fragile.
• Mind specificity. The widget ships its own styles; you may need !important on properties like font-size to win, as shown above.
• Prefer the supported path first. For SDK / headless installs, the theme object is the stable styling surface — reach for it before custom CSS.
• Re-test after updates. The Shopify snippets and widget are updated periodically. Re-check your overrides after an update.

Related

• Customize Dialog — the higher-level customization overview.
• Personal Shopper — guided flows triggered by a click instead of a URL.
• SDK reference — theme object for styling on custom stacks.
• Dialog not visible on store — if the modal never opens.