Actions

Actions allows you to define interactive flows in your chat interface, such as opening a link, opening an embeded form, or executing custom JavaScript. These actions can be triggered by users, when they click on buttons, or the AI assistant.

Action Types

Open URL Action

Opens a URL in a new tab or the current window:

const urlAction: OpenUrlAction = {
  type: "open_link",
  url: "https://example.com/docs",
};

Invoke Callback Action

Executes a callback function with optional modal control:

const callbackAction: InvokeCallbackAction = {
  type: "invoke_callback",
  callback: ({ conversation }) => {
    console.log("Chat conversation:", conversation);
    // Handle callback
  },
  shouldCloseModal: true, // Optional: controls whether to close the modal after callback
};

Open Form Action

Opens a form dialog with configurable fields and success view:

const formAction: OpenFormAction = {
  type: "open_form",
  formSettings: {
    heading: "Contact Support",
    description: "Please fill out the form below",
    fields: [
      {
        name: "email",
        label: "Email Address",
        inputType: "email",
        isRequired: true,
        placeholder: "Enter your email",
      },
      {
        name: "description",
        label: "Issue Description",
        inputType: "textarea",
        isRequired: true,
        placeholder: "Describe your issue",
      },
      {
        name: "priority",
        label: "Priority Level",
        inputType: "select",
        items: [
          { label: "Low", value: "low" },
          { label: "Medium", value: "medium" },
          { label: "High", value: "high" },
        ],
        isRequired: true,
      },
    ],
    buttons: {
      submit: {
        label: "Submit Ticket",
        onSubmit: async ({ values, conversation }) => {
          // Handle form submission
          await submitTicket(values);
        },
      },
      close: {
        action: "return_to_chat",
      },
    },
    successView: {
      heading: "Ticket Submitted",
      message: "We will get back to you shortly",
      doneButton: {
        label: "Back to Chat",
        action: "return_to_chat",
      },
    },
  },
};

See Form Settings for a full reference on what can be configured in the form.

Support Action Examples

Below are some examples of common actions used to hand off to your support channels.

Open Support Page

const supportPageAction = {
  icon: { builtIn: "FaQuestionCircle" },
  name: "Contact Support",
  action: {
    type: "open_link",
    url: "/support",
  },
};

Email Support

const emailSupportAction = {
  icon: { builtIn: "FaEnvelope" },
  name: "Email",
  action: {
    type: "open_link",
    url: "mailto:support@example.com?subject=Support Request",
  },
};

Open Support Ticket Form

const contactFormAction = {
  icon: { builtIn: "LuUsers" },
  name: "Create Support Ticket",
  action: {
    type: "open_form",
    formSettings: {
      heading: "Contact Support",
      description: "We'll help you resolve your issue.",
      fields: [
        {
          label: "Email",
          name: "email",
          inputType: "email",
          isRequired: true,
        },
        {
          label: "Description",
          name: "description",
          inputType: "textarea",
          isRequired: true,
        },
        {
          _type: "include_chat_session",
          label: "Include chat history",
          defaultValue: true,
        },
      ],
      buttons: {
        submit: {
          label: "Submit Request",
          onSubmit: async ({ values, conversation }) => {
            // Submit support request
            await submitSupportRequest(values);
          },
        },
      },
      successView: {
        heading: "Request Submitted",
        message: "We'll respond to your inquiry shortly.",
        doneButton: {
          label: "Continue Chatting",
          action: "return_to_chat",
        },
      },
    },
  },
};

Transfer to Live Chat

const liveChatAction = {
  icon: { builtIn: "FaComment" },
  name: "Talk to support",
  action: {
    type: "invoke_callback",
    callback: ({ conversation }) => {
      // Switch to live chat. Implementation depends on your live chat provider.
      switchToLiveChat(conversation);
    },
  },
};

Slack Community

const slackAction = {
  icon: { builtIn: "FaSlack" },
  name: "Slack Community",
  action: {
    type: "open_link",
    url: "https://join.slack.com/t/your-workspace/shared_invite/your-invite-code",
  },
};

Discord Community

const discordAction = {
  icon: { builtIn: "FaDiscord" },
  name: "Discord Community",
  action: {
    type: "open_link",
    url: "https://discord.gg/your-invite-code",
  },
};

On this page