Customize Payload

onBeforeSendMessage lets you customize the payload before a message is sent — attach the current page, user state, feature flags, or any other context metadata so the bot can respond based on the full picture, not just the user's text.

Select Context

Choose a category to inject into every outgoing message.

Send via ref

Payload Logs

Send a message to see the injected payload.

Loading chatbot...

Code Example

const [category, setCategory] = useState<Category | null>(null);

<Chatbot
  onBeforeSendMessage={(params) => ({
    ...params,
    payload: {
      categoryId: category?.id,
      categoryName: category?.name,
      injectedAt: new Date().toISOString(),
    },
  })}
  {...rest}
/>;

SendMessageParams

The shape received and returned by onBeforeSendMessage:

Field	Type	Description
text	string	The user's input text
payload	Record<string, unknown> | (() => Record<string, unknown>)	Metadata sent alongside the message to the bot provider
blobIds	string[]	Uploaded file blob IDs (optional)
filePreviewUrls	string[]	Image preview URLs (optional)
documentNames	string[]	Document names (optional)

The most common use is injecting payload. Other fields (e.g. prefixing text) can also be modified — the returned object replaces the original params.

Further Reading

For how payload is received and used by the bot provider, see the Asgard developer docs:

• Send Message API
• Memory & Payload