Using the HTML App in OttoKit

Need to generate HTML on the fly, pull specific bits out of an HTML page, or turn data into a clean table? The HTML Core App lets you do all of that directly in your workflows—no external tools, no manual copy-paste.

• You can include standard HTML, CSS inside <style> tags, and JavaScript inside <script> tags when generating templates.
• Note: No code is executed. The action simply returns your HTML with mapped values filled in.

Actions in the HTML Core App

1) Generate HTML Template

Create an HTML template and inject values from earlier workflow steps. The result is returned as HTML.

To generate an HTML template:

1. In your workflow, add a new action.
2. In the search bar, type HTML and select it.
3. Choose Generate HTML Template.
4. Click Continue to open the Configure tab.
5. Fill in the fields:
   • Data (required) – Paste your HTML boilerplate. You can reference fields from previous steps.
   • You may include:
     Standard HTML
     CSS inside
     JavaScript inside
   • Note: Scripts/styles are not executed; the action returns the templated HTML string.

6. Click Continue to move to the Test Step tab.
7. Click Test to render the template with your mapped values.

8. If the output looks good, click Save.
   [IMAGE HERE – Generate HTML Template Action]

2) Extract HTML Content

Extract specific values from HTML content using CSS selectors.

What it does:
You provide HTML (as a URL or raw HTML). Then, you define one or more extraction rules (key, CSS selector, and return type), with optional cleanup.

To extract HTML content:

1. In your workflow, add an action.
2. Search for HTML and select it.
3. Choose Extract HTML Content.
4. Click Continue to open the Configure tab.
5. Fill in the fields:
   • Data (required) – Provide the HTML source:
     • A File URL pointing to HTML, or
     • Raw HTML pasted directly.
   • Click Add Extraction Values for each field you want to pull:
     • Key – The name to store the extracted value under (e.g, headers).
     • CSS selector* – The selector to target (e.g., .price > strong, #order-id).
     • Return value* – One of:
       • text – The human-readable text content (default for labels, paragraphs).
       • html – The inner HTML (useful if you want markup preserved).
       • value – The value property for form inputs.
       • attribute – Returns the element’s attribute value (e.g., href, src).
     • Skip selector (optional) – Comma-separated selectors to exclude from text extraction.
   • Trim Values – Set to “True” to remove leading/trailing spaces and newlines.
   • Clean Up Text – Set to “True” to remove extra line breaks and collapse repeated spaces.

6. Click Continue to move to Test Step.
7. Click Test to run your extraction rules and view the output fields.

8. If everything looks correct, click Save.
   

3) Convert to HTML Table

Turn your content into a structured HTML table, with optional caption, smart headers, and custom styling.

To convert content to an HTML table:

1. In your workflow, add a new action.
2. Search for HTML and select it.
3. Choose Convert to HTML Table.
4. Click Continue to open the Configure tab.
5. Fill in the fields:
   • Data (required) – Provide the content to tabulate:
     • A File URL with the content, or
     • Raw HTML content
   • Click Show Optional Fields (if needed):
     • Caption – Text shown above the table (e.g., “Quarterly Sales”).
     • Capitalize Headers – Set to “True” to auto-capitalize table headers.
     • Custom Styling – Set to “True”  if you want to include a <style> block for table styles.

6. Click Continue to move to Test Step.
7. Click Test to see the generated table HTML.

8. If the table looks right, click Save.

That’s All

Practical Use Cases

Below are three practical examples showing how to use it.

Send a Branded HTML Email After a WooCommerce Order

Scenario: A customer places an order on your WooCommerce store. You want to send them a well-formatted, branded confirmation email instead of a plain text message. The Generate HTML Template action in the HTML App lets you build a custom email body with the order details mapped in automatically.

Step 1: Set Up the Trigger

1. Create a new workflow in OttoKit.
2. Click the trigger area and search for WooCommerce.
3. Select Order Created as the trigger event.
4. Connect your WordPress site.
5. Click Save Trigger, then Fetch Data to load a sample order. This gives you fields like customer name, order number, and total to use in the next steps.

Step 2: Add the HTML App

1. Click the + button below the trigger.
2. Search for HTML and select it.
3. Choose Generate HTML Template as the action.
4. Click Continue to open the Configure tab.
5. Data (required): paste your HTML email template into this field. Use @ to map values from the WooCommerce trigger into the template. For example, you can map the customer name, order number, items, and total into the correct places in your HTML.
6. Your template can include standard HTML, CSS inside style tags, and JavaScript inside script tags. The action returns the HTML as a string with all mapped values filled in. No code is executed.
7. Click Continue, then click Test. The output will show your rendered HTML with the sample order data filled in.
8. Click Save.

Note: You do not need to be an HTML expert. A simple layout with a heading, a few lines of text, and some bold fields is enough to create a clean, professional-looking email.

Step 3: Send the Email to the Customer

1. Click the + button below the HTML step.
2. Search for Gmail (or your preferred email app) and select Send Email.
3. To: map the customer email from the WooCommerce trigger.
4. Subject: Your Order Confirmation, Order #[map order number].
5. Body: map the HTML output from the Generate HTML Template step. Make sure HTML mode is enabled in the email app so the formatting renders correctly for the customer.
6. Click Test, then Save.
7. Click Publish Workflow in the top-right corner.

That is it. Now every new order triggers a branded HTML confirmation email sent automatically to the customer.

Extract Data from an HTML Page and Log It to a Spreadsheet

Scenario: You have a webpage or an HTML file that contains data you want to capture automatically, such as a product name, a price, or a status value. Instead of copying this manually, you can use the Extract HTML Content action to pull out the exact values you need using CSS selectors, then log them to a Google Sheets spreadsheet.

Step 1: Set Up the Trigger

1. Create a new workflow in OttoKit.
2. Click the trigger area and search for Schedule.
3. Select your preferred schedule, for example, every day at 9 am.
4. Click Save Trigger.

Step 2: Fetch the HTML Page

1. Click the + button below the trigger.
2. Search for the API App and select it.
3. Choose Make API Request as the action.
4. URL (required): enter the URL of the page you want to fetch.
5. Method: select GET.
6. Click Test to confirm the response returns the HTML content of the page. Click Save.

Step 3: Add the HTML App

1. Click the + button below the API step.
2. Search for HTML and select it.
3. Choose Extract HTML Content.
4. Click Continue.
5. Data (required): map the raw HTML response from the API step using @.
6. Click Add Extraction Values to define what you want to extract. Fill in one entry for each piece of data:

Field	What to Enter
Key	A name for the extracted value, for example: product_name or price.
CSS Selector	The CSS selector that targets the element. For example: .product-title or #item-price.
Return Value	Select text to get the readable content of the element.

1. Set Trim Values to True to remove extra spaces from the output.
2. Set Clean Up Text to True to remove extra line breaks.
3. Click Continue, then click Test. The output fields will show the extracted values from the HTML. Click Save.

Note: To find the right CSS selector, open the page in your browser, right-click the element you want to extract, and select Inspect. Look at the class or ID name on the highlighted element.

Step 4: Log the Data to Google Sheets

1. Click the + button below the HTML step.
2. Search for Google Sheets and select Add Row.
3. Connect your Google account and select the spreadsheet and sheet where data should be saved.
4. Map each extracted value from the HTML step to the matching column in your spreadsheet.
5. Click Test, then Save.
6. Click Publish Workflow.

That is it. Now your workflow runs on schedule, fetches the page, extracts the values you need, and logs them to your spreadsheet automatically.

Generate an HTML Table Report and Email It to Your Team

Scenario: Your team collects submission or sales data in a Google Sheet. Every Friday, you want to automatically pull the latest rows, turn them into a clean HTML table, and email the report to your team. The Convert to HTML Table action handles the formatting, so you do not have to.

Step 1: Set Up the Trigger

1. Create a new workflow in OttoKit.
2. Click the trigger area and search for Schedule.
3. Select your preferred schedule. For a weekly report, choose every Friday at a time that suits your team.
4. Click Save Trigger.

Step 2: Fetch the Data from Google Sheets

1. Click the + button below the trigger.
2. Search for Google Sheets and select Fetch Range.
3. Connect your Google account and select the spreadsheet and sheet that contains your data.
4. Range: enter the cell range you want to include in the report, for example A1:D50.
5. Click Test to confirm the data loads. Click Save.

Step 3: Add the HTML App

1. Click the + button below the Google Sheets step.
2. Search for HTML and select it.
3. Choose Convert to HTML Table.
4. Click Continue.
5. Data (required): map the data output from the Google Sheets step using @.
6. Click Show Optional Fields and set the following:

Field	What to Enter
Caption	Enter a title for the table, for example: Weekly Report.
Capitalize Headers	Set to True to auto-capitalize the column headers.
Custom Styling	Set to True if you want to add CSS styles to the table for a cleaner look.

1. Click Continue, then click Test. The output will show the HTML table markup. Click Save.

Step 4: Email the Report to Your Team

1. Click the + button below the HTML step.
2. Search for Gmail and select Send Email.
3. To: enter your team email address or distribution list.
4. Subject: Weekly Report.
5. Body: map the HTML table output from the Convert to HTML Table step. Make sure HTML mode is enabled so the table renders correctly in the email.
6. Click Test, then Save.
7. Click Publish Workflow.

That is it. Now every Friday, your workflow pulls the latest data, turns it into a formatted HTML table, and emails the report to your team automatically.

With the HTML Core App in OttoKit, you can generate dynamic templates, extract key values, or transform raw content into structured HTML tables — all without leaving your workflows. No more juggling external tools, copy-pasting code, or running manual cleanups.

Whether you’re building reports, pulling specific page data, or formatting results into polished tables, OttoKit makes it simple, fast, and repeatable.

Start using the HTML App today and turn your workflows into smarter, cleaner, and more flexible automation.