Develop the iFrame widget in Automation Co-Pilot using Chrome extension to deploy in your web application.

Prerequisites

  • You must be logged in to the Control Room with AAE_Basic permissions.
  • Ensure that Automation Co-Pilot using Chrome extension is installed in your browser by completing setup. Set up and connect Automation Co-Pilot using Chrome extension
  • Set up the widget in Automation Co-Pilot that will map automations into Automation Co-Pilot using Chrome extension. Setup iFrame widget using Automation Co-Pilot
  • Have the widget embed code accessible to enter into Automation Co-Pilot using Chrome extension. You need only the URL in quotes after src=.

With Automation Co-Pilot using Chrome extension, your Chrome browser will act as the vessel to embed the widget. Using the following steps, develop an iFrame widget for your web application and deploy the widget to Automation Co-Pilot to map your complete embedded automation experience. While you can develop many web components, the following steps streamline a simple process to bring automations directly into your web application.

The PixieBrix Page Editor environment is used to map and configure automations from Automation Co-Pilot to your web application and select the component for embedding the widget. This environment uses your OAuth connection to access saved processes and automations from your Control Room and map them to the selected component. For complete details on developing in the Editor, see the following link: Guide to PixieBrix Page Editor

The following video demonstrates the process of developing the widget in Automation Co-Pilot using Chrome extension.

Procedure

  1. To begin, navigate to the web application where the iFrame widget will be embedded.
  2. Select the Render Panel action and delete it by clicking the trash icon on the top of the pane.
  3. To open the page editor, from the desired web application, right-click and select Inspect.
    The following table and image details the development environment.
  4. From Extensions List, click Add and select Sidebar panel.
  5. From the Overview panel, click the plus icon to open the component menu.
  6. Select the iFrame component and click Add brick.
  7. In the Configuration panel, complete the necessary fields.
    1. Enter the Name of the widget. This name will appear in Automation Co-Pilot when you begin provisioning to users.
    2. Enter the widget URL to access your Control Room.
    This is the URL taken from the embed code found in Automation Co-Pilot using embedded widget. You need only the URL in quotes after src=.
  8. Save your Extension.
  9. Test and debug your extension by using the data panel.
    The final output is detailed in the data panel and alerts you to any action that might be mapped or configured incorrectly.
    Important: If an alert for invalid connection or invalid credential appears, check that you have set up and connected Automation Co-Pilot correctly to Automation Co-Pilot using Chrome extension.
  10. After successful verification, click the vertical ellipses in the Extensions List panel to add your extension to a blueprint.
  11. Select create new blueprint.
  12. Select move or copy into the new blueprint.
  13. Enter your unique id.
  14. Enter the name to identify the extension in the next step.
  15. Enter the version for developers to identify the progressive customizations made over the life of the extension.
  16. Enter a description.
  17. Click Create to save your changes.

Next steps

After developing the extensions for your team, deploy the blueprint to Automation Co-Pilot using Chrome extension. Deploy an extension version using Chrome extension