Using the HTML Widget

The HTML widget allows you to define the content and style of the displayed data. You can customize the HTML widget by using a variety of Presets. The Presets come with out-of-the box HTML code that displays the data in a predefined format and can be customized with the Code Editor. This provides a tailored view of the data when glancing at the Case Overview or Alert Overview.

The HTML widget comes with the following presets: 

  • Empty
  • Clock
  • Map
  • Table
  • Video
  • Number
  • Score
  • Bar Chart
  • Conversation
  • Gallery
  • User Details
  • 7 Layout options

Creating an HTML Widget 

Let's create an HTML widget that displays enrichment details about the target user in a Phishing Use Case.

  1. Drag and drop the HTML widget in the view. Then click on the settings icon and configure it with the relevant information. For this example, name the widget Target Profile.
  2. Select the predefined Preset —  User Details. This is a key/value Preset that retrieves the user's details from the playbook.
  3. Next, define the height of the widget. You can decide the optimal height for the widget. For this example, keep the default Widget Height as 425 pixels.
  4.  Highlight the field/value that you want to customize in the ready-to-go HTML code that comes with the Preset.


  5.  Insert Placeholders in the code by clicking on the placeholder icon. Select the required value for each field from the drop-down menu. In this example, replace the fields with the following values from the playbook:


    Var field2 =

    Var field3 =

    Var field4 =

    Var field5 =

    Var field6 =

    Var field7=

    Var field8=

    Var field9=

    Var field10=

  6. Click Save. As data is ingested into the Google Security Operations platform, the HTML widget populates with information captured during the playbook run.