How To Implement Copilot AI Search And Add A Search Call-To-Action

Admiral Copilot transforms both passive browsing and traditional site search into interactive, conversational discovery using your own content.

You can trigger Admiral Copilot directly from your site’s HTML elements or via custom code. Both methods work across all Copilot UI variants, including the floating Bubble, Full Page Takeover, and Side/Bottom Drawers. When triggered, Copilot will open with the option to pass an initial user message automatically.

Method 1: Using HTML Data Attributes

Data attributes allow you to trigger Copilot directly from your existing site elements without writing custom JavaScript.

1. Simple Click Trigger (Open Chat)

Add the data-copilot-open-chat attribute to any clickable element (such as a <button>, <a>, or <div>). When a user clicks this element, Copilot opens immediately.

HTML

<!-- Example: Search button in navigation -->

<button data-copilot-open-chat>Search with AI</button>

2. Form Submission Trigger (Open Chat with Input)

To capture text from a search box or input field and pass it directly into a new Copilot conversation upon submission, use a combination of form data attributes:

• Add data-copilot-open-chat-form to the <form> element.
• Add data-copilot-open-chat-input to the text <input> field.

When the form is submitted, Copilot automatically opens, captures the user's text, and sends it as the initial prompt.

HTML

<!-- Example: External search bar sending query to Copilot -->

<form data-copilot-open-chat-form>

<input type="text" data-copilot-open-chat-input placeholder="Ask a question..." />

<button type="submit">Ask Copilot</button>

</form>

Method 2: Using the JavaScript API

If you need programmatic control or wish to fire triggers dynamically based on user behavior, use Admiral’s JS API commands.

1. Open Copilot

To simply open or expand the Copilot drawer/bubble:

JavaScript

admiral("show", "sticky.menu");

2. Open Copilot and Pre-fill/Send a Message

To open Copilot and automatically start a conversation with a specific pre-defined query or user prompt, pass the message parameter in the option payload:

JavaScript

admiral("show", "sticky.menu", {

message: "What is the meaning of life?"

});

If you have any questions or would like assistance, please reach out to customerlove@getadmiral.com.

Frequently Asked Questions

How do I enable Visitor Copilot for my site?

To enable Visitor Copilot, navigate to your Admiral Dashboard, select Visitor Copilot on the left rail and toggle ON. Provided your Admiral tag is live, you may select Preview on the Visitor Copilot Settings to view. NOTE: Copilot does not need to be enabled to Preview.

Does this work with all Copilot layouts?

Yes. Whether your web property uses the floating bubble, side drawer, bottom drawer, or full-page takeover, both data attributes and JS API calls trigger the configured active layout identically.