Configure an iFrame widget in a web application

You must configure iFrame widget settings in a supported web application to properly enable the iFrame widget.

Prerequisites

Ensure you have completed the following:

  • Provided a system-created AAE_Robotic_Interface User role for the Co-Pilot User.
  • Have access to Automation Co-Pilot for Business Users on the web interface.
  • Have access to the web application of your choice that supports the iFrame technology. For this task, it would be the ServiceNow Service Portal and ServiceNow App Engine Studio.

Procedure

  1. Log in to the ServiceNow Service Portal.
  2. Navigate to the Widget Editor page.
    This page has a few options for you to configure your widget, as well as a reference for you to view any recently updated widgets.
  3. Click the Create a new widget option for creating new widgets.
    The Add a Widget window appears with details for you to specify your widget.
  4. Specify the name of the widget in the Widget Name field.
    The ID of the widget will be automatically generated when you enter the name.
    For example, you can name your widget AA Bots for reference that this is an Automation Anywhere bots widget.
  5. Click Submit.
    A new window with an HTML template or editor prompts you to enter the iFrame widget details, if applicable.
  6. Paste your iFrame widget code to the HTML template.
    This is the iFrame widget code that you had generated in the Automation Co-Pilot (web).
  7. Click Save or press Ctrl + S to save the current session.
    You have now added the iFrame widget code and saved your session. This is the code to embed your iFrame widget.
  8. Access to the main page of the ServiceNow App Engine Studio.
  9. Navigate to All > Service Portal Configuration
  10. Click Designer.
  11. Select an existing page to edit.
    You are now directed to a designer page.
  12. Optional: Rearrange or remove your existing widgets on the page, to give space for the iFrame widget.
  13. Drag the widget you had created (ex: AA Bots) from the Widgets tab and place it on the page.
    You have now successfully added the iFrame widget and should now be visible on the page.
    Important: The iFrame widget is visible but with no styling applied.
  14. Navigate back to the ServiceNow Service Portal
  15. Click Widget Editor.
  16. Click on your widget (ex: AA Bots) from the Recently Updated list.
    You are now navigated to the window with an HTML template. The page should also include a CSS template.
  17. Specify the widget (ex: AA Bots) details in the CSS template.
    This can be the border size, style, and color of the widget.
    Sample of CSS code in the CSS template page
  18. Navigate back to the designer page.
    The iFrame widget structure has now been updated.
  19. Refresh the page.
    You will notice a small-sized window that appears and is connected to the Automation Co-Pilot (web) interface with a login page.
    Sample of login in with Automation Co-Pilot credentials.
  20. Log in with your user credentials to the iFrame widget in order to access your Automation Co-Pilot data.
    The iFrame widget will refresh and a list of automations and tasks from Automation Co-Pilot is now available. You can interact directly with your data.
  21. View the iFrame widget.
    Sample of iFrame widget in ServiceNow.
    You have now successfully embedded the iFrame widget with Automation Co-Pilot data to your web application.
    For your next steps, you can deploy your automations using the iFrame widget, see Deploy automations in web application.