Add a legal notice to the chat widget

Add or replace a legal notice in the React InstantSearch chat widget.

This is the React InstantSearch v7 documentation. If you’re upgrading from v6, see the upgrade guide. If you were using React InstantSearch Hooks, this v7 documentation applies—just check for necessary changes. To continue using v6, you can find the archived documentation.

Use the Chat widget’s prompt to add a legal notice, replace the default disclaimer, or show a warning above the prompt.

If you only need to change the text in the prompt footer, use translations.prompt.disclaimer. If you need richer content such as a link, use promptFooterComponent instead.

Change the prompt disclaimer text

Use translations.prompt.disclaimer to replace the default prompt disclaimer without changing the footer layout.

React

<Chat
  agentId="YOUR_AGENT_ID"
  translations={{
    prompt: {
      disclaimer: "Responses are generated by AI. Verify important details.",
    },
  }}
/>

Replace the prompt footer

Use promptFooterComponent when you need more than plain text. For example, you can add a link to your AI policy or legal terms.

React

function LegalNotice() {
  return (
    <p className="ChatLegalNotice">
      Responses are generated by AI.
      {" "}
      <a href="/legal/ai-policy">Read the AI policy</a>.
    </p>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  promptFooterComponent={LegalNotice}
/>

promptFooterComponent replaces the default prompt footer content. Use promptHeaderComponent to show content above the textarea instead.

Add message footers

Use assistantMessageFooterComponent or userMessageFooterComponent to display content below each message bubble.

React

function AssistantNotice() {
  return (
    <small>
      Verify important details before acting on this response.
    </small>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  assistantMessageFooterComponent={AssistantNotice}
/>

Use userMessageFooterComponent to show a footer below user messages.

Show a warning above the prompt

Use promptHeaderComponent to display a warning above the prompt input instead of below it.

React

function WarningBanner() {
  return (
    <div className="ChatPromptWarning">
      Don't share personal or sensitive information in the chat.
    </div>
  );
}

<Chat
  agentId="YOUR_AGENT_ID"
  promptHeaderComponent={WarningBanner}
/>

For more information, see the Chat API reference.