---
description: >-
  This guide discusses how to embed ProcessMaker's actionable forms or web
  entries into third-party web applications.
---

# Starting a Request via Anonymous Web Entry

## Overview

This guide discusses the process of embedding ProcessMaker actionable forms or most commonly known as Web Entry into a web application using an iFrame to [initiate new requests](https://docs.processmaker.com/using/requests/what-is-a-request) of your workflow/process on the ProcessMaker platform.&#x20;

{% hint style="info" %}
ProcessMaker [Web entries](https://docs.processmaker.com/designing-processes/process-design/model-your-process/event-elements/start-type-event-elements/add-and-configure-an-event-element#web-entry-panel-settings) are dynamic and actionable forms that are used to seamlessly integrate into third-party applications. These versatile forms not only merge smoothly with external platforms but also provide a wealth of interactive possibilities, empowering users to engage, input, and interact within their preferred applications effortlessly.
{% endhint %}

## Steps to Embed Actionable Forms

By following the steps below, seamlessly integrate actionable forms into your application.

### Step 1: Generate the Web Entry Link or Code Snippet

To seamlessly integrate an actionable form or web entry, begin by generating the web entry link. Follow these steps to get the [web entry link or the web entry code snippet](https://docs.processmaker.com/designing-processes/process-design/model-your-process/event-elements/start-type-event-elements/add-and-configure-an-event-element#web-entry-panel-settings). Below are examples of the web entry link or code snippet:

#### Web Entry Link

```html
https://my-server.processmaker.com/webentry/72/servicerequest
```

#### Web Entry Code Snippet

{% code overflow="wrap" %}
```html
<script type="application/javascript" src="https://my-server.processmaker.com/webentry/72/servicerequest/embed" async></script>
```
{% endcode %}

### Step 2: Embed the Web Entry Link into Your Web Application

Identify the appropriate location within your Web application to embed the Web entry link. This could be a specific page, a modal window, or any other suitable area. Insert the provided web entry link, including the iFrame, into the desired location in your HTML file.

Let's embed the web entry link into the iFrame, use the following sample HTML code:

<details>

<summary>HTML</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERP Website</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <style>
    /* CSS styles for the ERP website */
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #f1f1f1;
    }

    header {
      background-color: #ff6347; /* New color for the header */
      color: #fff;
      padding: 10px;
      text-align: center;
    }

    .container {
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
    }

    .sidebar {
      background-color: #f9f9f9;
      width: 200px;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar h3 {
      margin-top: 0;
      font-size: 1.2rem;
      color: #555;
    }

    .sidebar ul {
      list-style-type: none;
      padding: 0;
      margin: 10px 0;
    }

    .sidebar li {
      margin-bottom: 5px;
    }

    .sidebar a {
      text-decoration: none;
      color: #333;
      display: flex;
      align-items: center;
    }

    .sidebar .material-icons {
      margin-right: 5px;
    }

    .content {
      flex-grow: 1;
      padding: 20px;
    }

    .content-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    h1 {
      margin: 0;
      color: #ff6347; /* New color for the heading */
      font-size: 2.5rem;
    }

    p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #444;
    }

    .iframe-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .action-button {
      background-color: #ff6347; /* New color for the button */
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <header>
    <h1>Rocket ERP</h1>
  </header>
  <div class="container">
    <!-- Sidebar -->
    <div class="sidebar">
      <h3>Menu</h3>
      <ul>
        <li>
          <a href="#"><i class="material-icons">dashboard</i> Dashboard</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">inventory</i> Inventory</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">shopping_basket</i> Sales</a>
        </li>
        <li>
          <a href="#"><i class="material-icons">add_shopping_cart</i> Purchases</a>
        </li>
      </ul>
    </div>

    <!-- Main Content Area -->
    <div class="content">
      <div class="content-header">
        <h1>Rocket ERP</h1>
        <button class="action-button">New Purchase Approval</button>
      </div>
      <p>You are logged into the ERP system, and here's a snapshot of the dashboard:</p>
      <div class="iframe-container">
        <!-- Replace the iframe content with your actual ERP system's URL or relevant content -->
        <iframe src="https://veggiedonuts.training.processmaker.net/webentry/8/node_1" frameborder="0" style="height:1000px;"></iframe>
      </div>
    </div>
  </div>
</body>
</html>
```

</details>

### Step 3: Customize the iFrame Attributes (Optional)

You can customize the attributes of the iFrame according to your requirements. For example, you can adjust the width, height, frameborder, and other attributes of the iFrame to fit your application's design and layout.

### Step 4: Test and Verify the Integration

Save your changes and reload your Web application. Ensure that the embedded actionable form is visible and functioning correctly within your application. Test the functionality of the actionable form, such as submitting a new request to ensure that everything works as expected.

#### Output Preview: Embedded ProcessMaker Actionable Form

After you have completed the steps above, verify ProcessMaker's Actionable Form or Web entry is embedded to your Web application.

<figure><img src="https://1243566085-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FPyTHGwZ0VereJkRNmGxE%2Fuploads%2F26UZOqeltAyznDdS3HC0%2Fimage.png?alt=media&#x26;token=b7254001-892d-4671-8803-ff8c2bdd224f" alt=""><figcaption><p>Embedded Actionable Form or Web entry into an iFrame</p></figcaption></figure>

## Conclusion

By following the steps outlined in this guide, you can integrate the ProcessMaker's powerful Web entry or actionable form into your Web application using an iFrame to submit new requests.
