The HTML widget lets you define the content and style of the displayed
data. You can customize it using a variety of presets, including ready-made HTML
code to display the data in a predefined format. You can further personalize the
display with the code editor, which provides a tailored view of the data in the
case 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
Create an HTML Widget
To create an HTML widget that displays enrichment details about the
target user in a phishing use case, follow these steps:
Drag the HTML widget in the view.
Click
settings
Settings and configure it with the relevant information. For this example,
name the widget Target Profile.
Select User Details.
Select Empty to customize your widget. This preset doesn't contain any predefined HTML code.
Define the optimal height of the widget. For this example, keep the default widget height as 425 pixels.
You can click the Safe HTML Rendering toggle to activate safe HTML rendering, returning code without potentially malicious JavaScript.
Highlight and customize the field/value in the preconfigured HTML code provided by the preset.
Click to expand the code editor window.
Click data_array Data Array to insert placeholders in the code.
Select the required value for each field from the list.
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]
Click Save. As data is ingested into the Google SecOps platform, the HTML widget populates with information captured during the playbook run.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Hard to understand","hardToUnderstand","thumb-down"],["Incorrect information or sample code","incorrectInformationOrSampleCode","thumb-down"],["Missing the information/samples I need","missingTheInformationSamplesINeed","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-29 UTC."],[[["\u003cp\u003eThe HTML widget in Google SecOps allows users to define and style the content of displayed data, offering customized views in Case or Alert Overviews.\u003c/p\u003e\n"],["\u003cp\u003eThe HTML widget offers a variety of presets, such as Clock, Map, Table, Video, and User Details, that come with pre-defined HTML code for displaying data, which users can further customize.\u003c/p\u003e\n"],["\u003cp\u003eTo create an HTML widget, users can drag and drop it into a view, configure it through the settings, select a preset, and customize the HTML code within the widget using placeholders for dynamic data.\u003c/p\u003e\n"],["\u003cp\u003eWhen using the Video or Layout 6 presets, it is recommended to use Sendspark, as some video sites like YouTube are not supported.\u003c/p\u003e\n"],["\u003cp\u003eThe safe HTML rendering toggle can be used to prevent potentially malicious JavaScript.\u003c/p\u003e\n"]]],[],null,["# Discover the HTML Widget\n========================\n\nSupported in: \nGoogle secops [SOAR](/chronicle/docs/secops/google-secops-soar-toc) \nThe HTML widget lets you define the content and style of the displayed\ndata. You can customize it using a variety of presets, including ready-made HTML\ncode to display the data in a predefined format. You can further personalize the\ndisplay with the code editor, which provides a tailored view of the data in the\ncase or alert overview.\n\nThe HTML widget comes with the following presets:\n\n- Empty\n- Clock\n- Map\n- Table\n- Video\n- Number\n- Score\n- Bar Chart\n- Conversation\n- Gallery\n- User Details\n- 7 Layout options\n\n| **Note:** When using the Video or Layout 6 presets, certain video sites, such as YouTube and files.fm are not supported. use Sendspark as an alternative. If you're unsure whether the video site you're using is supported within the Google Security Operations platform, contact Customer Support.\n\n#### Create an HTML Widget\n\nTo create an HTML widget that displays enrichment details about the\ntarget user in a phishing use case, follow these steps:\n\n1. Drag the **HTML** widget in the view.\n2. Click settings **Settings** and configure it with the relevant information. For this example, name the widget *Target Profile*.\n3. Select **User Details**.\n4. Select **Empty** to customize your widget. This preset doesn't contain any predefined HTML code.\n5. Define the optimal height of the widget. For this example, keep the default widget height as 425 pixels.\n6. You can click the **Safe HTML Rendering** toggle to activate safe HTML rendering, returning code without potentially malicious JavaScript.\n7. Highlight and customize the field/value in the preconfigured HTML code provided by the preset. Click to expand the code editor window.\n8. Click data_array **Data Array** to insert placeholders in the code.\n9. Select the required value for each field from the list.\n10. In this example, replace the fields with the following values from the playbook:\n\n \u003cbr /\u003e\n\n11. Click **Save**. As data is ingested into the Google SecOps platform, the HTML widget populates with information captured during the playbook run.\n\n**Need more help?** [Get answers from Community members and Google SecOps professionals.](https://security.googlecloudcommunity.com/google-security-operations-2)"]]