PostMessage for Flex

plugin.js

import React from 'react';
import * as Flex from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';

const PLUGIN_NAME = 'TestPlugin';

export default class TestPlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof Flex }
   */
  async init(flex, manager) {
    
    // listen for messages from rider dash app
     window.addEventListener('message', event => {
       if (event.origin === 'https://your-iframe-origin.com') {
         const { action, payload } = event.data;
         Flex.Actions.invokeAction(action, payload);
       }
     }
                             
     // if using Flex 2.x
     // Send Rider Dash the task details for every task assigned to the agent in Flex
     manager.events.addListener("taskReceived", (task) => {
      window.parent.postMessage({ task }, 'https://rider.dash');
     });
    
  }
}

riderdash.html

<!-- Parent page content -->
<iframe id="myIframe" src="https://flex.twilio.com"></iframe>

<script>
  const iframe = document.getElementById('myIframe');
  
  // this is an example of sending a message to Flex
  // by organizing our messages with actions and payloads,
  // we could invoke any Flex Action
  iframe.contentWindow.postMessage({
    action: 'StartOutboundCall',
    payload: {
      destination: "+1234567",
      queueSid: "WQXXXXXXXXXXXXXXXXX"
    }
  });

  // Listen for messages from Flex
  // in this example, Flex will tell Riderdash when it receives a reservation
  window.addEventListener('message', event => {
    if (event.origin === 'https://flex.twilio.com') {
      // Rider Dash can now be informed by Flex when an agent receives a task!
      const task = event.data.task;
      console.log(task);
    }
  });
</script>