Docs
Chat Widget Controls

Chat Widget Controls

Explore the available JavaScript APIs for extending and controlling your embedded chatbot widget.

This documentation provides a reference for all JavaScript APIs available to control and extend the functionality of your embedded chatbot widget.

Open Chatbot Window

Programmatically opens the chatbot window, making it visible to users.

window.Chatbot.open();

Try running this in your browser console where the chatbot is embedded to see it in action

Additional Instructions

  • Ensure the chatbot script is fully loaded before calling this function.
  • Note: The open() function only works with popup style widgets and is not supported for in-page embedded widgets.

Close Chatbot Window

Programmatically closes the chatbot window, hiding it from view.

window.Chatbot.close();

Try running this in your browser console where the chatbot is embedded to see it in action

Additional Instructions

  • Confirm the chatbot script is loaded before invoking this method.
  • Note: The close() function only works with popup style widgets and is not supported for in-page embedded widgets.

Set Metadata at Runtime

Dynamically update the metadata object that will be sent with every chat message.

window.Chatbot.setMetadata({
  customKey: "customValue",
  // ...add any fields you need!
});

Additional Instructions

  • This method allows you to set or update the metadata object at any time after the widget has initialized.
  • ⚠️ Note: Invoking setMetadata will overwrite the existing metadata. Always pass the full, final metadata object you want to use.
  • After calling this method, all subsequent messages sent from the widget to n8n will include the newly set metadata object.
  • This function works with both popup and in-page widget styles.
  • Along with your custom metadata, default metadata fields will also be included in each message. Learn more about default metadata.

Summary

  • Each section documents a specific JavaScript API for interacting with your chatbot widget.
  • Use these APIs to build an interactive chatbot experience tailored to your website's needs.
  • Combine with other N8N Chat UI features for more powerful integrations.