Appearance

Custom Button Actions ​

The "Post Message" action in the Videobot editor allows users to create interactive buttons within their Videobot experience. When clicked, these buttons send a predefined message back to the parent component.

This feature is particularly useful for engaging visitors in a more interactive way and can be used to initiate specific actions or responses in the parent application.

What does the action do? ​

When a user sets up the "Post Message" action, they define a button with a specific name and message content. Upon clicking this button during the Videobot interaction, the specified message is sent to the parent component from the Videobot iframe.

The message is sent using the window.postMessage method, a standard way for iframes to communicate with their parent pages in web development.

Creating the action ​

  1. Open the Videobot editor in the Dashboard.
  2. In your Videobot flow, select the point where you want to add the action.
  3. Click Add Action and choose the Post Message option.
  4. Set a name for your button and the content of the message that will be sent.
  5. Save your changes in the editor.
Screenshots

![Videobot Post Message Action]

TIP

You can create multiple post message actions within a single Videobot flow, each with different messages or purposes.

Reacting to the action ​

Ensure your website is set up to listen for messages from the iframe. This typically involves adding an event listener for message events to the window object.

Handle the incoming messages as per your application's requirements.

WARNING

Always validate the origin of incoming messages for security purposes. This ensures that your application only processes messages from trusted sources (like your Videobot iframe).

javascript
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://videobot.com') return;

    const message = event.data;
    console.log('Message from Videobot:', message);
});