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

Note: When using the Video or Layout 6 presets, certain video sites, such as YouTube and files.fm are not supported. Please use Sendspark instead. If you are not sure if the video site you are working with is supported within the Google Security Operations platform, please ask Customer Support. 

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.
   Note:For a detailed description to create a view, see Define Customized Alert Views from Playbook Designer.
2. Select the predefined Preset —  User Details. This is a key/value Preset that retrieves the user's details from the playbook.
   
   Note:You can completely customize your widget by selecting Empty. This preset does not contain any predefined HTML. 
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.
   
   Note:You have the option to turn on the toggle to ensure safe HTML rendering to return code without including potentially malicious JavaScript.
4.  Highlight the field/value that you want to customize in the ready-to-go HTML code that comes with the Preset.
   

   

   Note:You can expand the Code Editor window by clicking on the expand_content  icon.
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:

   Variable	Value
   Var field2 =	[Entity.AD_Image]
   Var field3 =	[Entity.Ad_Displayname]
   Var field4 =	[Entity.AD_role]
   Var field5 =	[Environment.ContactEmail]
   Var field6 =	[Entity.AD_address]
   Var field7=	[Entity.AD_Displayname]
   Var field8=	[Entity.AD_memberOf]
   Var field9=	[Entity.IsFromLdapString]
   Var field10=	[Entity.Environment]

   
   

   
   

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