# Builder.io + Workfront Integration

**URL:** <https://forum.builder.io/t/builder-io-workfront-integration/5564>\
**Category:** General\
**Tags:** integration\
**Created:** [May 13, 2024, 3:41pm UTC](https://forum.builder.io/t/builder-io-workfront-integration/5564 "2024-05-13T15:41:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jhs129](https://avatars.discourse-cdn.com/v4/letter/j/2acd7d/32.png) [@jhs129](https://forum.builder.io/u/jhs129)\
**Post date:** [May 13, 2024, 3:41pm UTC](https://forum.builder.io/t/builder-io-workfront-integration/5564/1 "2024-05-13T15:41:36Z")

</div>

Hi-

I have a client who uses Adobe Workfront to manage their campaign creation workflow including review and approval of campaign landing pages. Has anyone ever done an integration with [Builder.io](http://Builder.io) and Workfront to do things like:  
-Create a Workfront Workflow task to review a page created in [builder.io](http://builder.io)?

- Publish a page in [Builder.io](http://Builder.io) from a Workfront workflow review?

_Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank._

**Builder content link**  
_e.g. [Builder.io: Visual Development Platform](http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51)_

**Builder public api key**  
_go to [Builder.io: Visual Development Platform](https://builder.io/account/organization) and copy your PUBLIC api key_

**What are you trying to accomplish**  
_e.g. I want to integrate builder on a landing page_

**Screenshots or video link**  
_Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing_

**Code stack you are integrating Builder with**  
_e.g. NextJS, react, Shopify_

**Reproducible code example**  
_If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!_

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 14, 2024, 12:11pm UTC](https://forum.builder.io/t/builder-io-workfront-integration/5564/2 "2024-05-14T12:11:47Z")

</div>

Hello @jhs129,

Integrating [Builder.io](http://Builder.io) with a third-party application like Adobe Workfront can streamline the process of managing workflows, specifically for tasks such as creating review tasks when a page is built in [Builder.io](http://Builder.io). However, [Builder.io](http://Builder.io) does not have a built-in integration with Adobe Workfront out-of-the-box. To accomplish this, you would generally use a combination of [Builder.io](http://Builder.io) webhooks, APIs, and potentially a middleware platform like Zapier, or develop a custom backend service to bridge the integration.

Here’s a high-level approach to creating a workflow task in Adobe Workfront when a page is created in [Builder.io](http://Builder.io):

### 1. Setup Webhook in [Builder.io](http://Builder.io)

Firstly, you would set up a webhook in [Builder.io](http://Builder.io) to trigger when a specific event occurs, such as when a page is created or published.

- Go to your [Builder.io](http://Builder.io) space settings.
- Navigate to the “Webhooks” section.
- Create a new [webhook](https://www.builder.io/c/docs/webhooks) and select the event you want to trigger the webhook. For instance, you can choose “Content Published” or “Content Updated”.
- Enter the URL where the webhook should send the data. This URL will be your middleware or custom backend that processes these requests.

### 2. Middleware / Backend Service

Develop a middleware service or use an existing integration platform like Zapier:

- **Using Zapier** : You can set up a Zap where the trigger is the Webhook from [Builder.io](http://Builder.io), and the action is to create a task in Adobe Workfront. Zapier supports custom Webhooks and has a Workfront integration.
- **Custom Backend Service** : Develop a service that catches the webhook from [Builder.io](http://Builder.io), processes the necessary data, and interacts with the Adobe Workfront API to create tasks.
  - This service would need to parse the incoming webhook data, authenticate with Workfront, and use the Workfront API to create or update tasks.

### 3. Adobe Workfront API

Utilize the Adobe Workfront API to create or manipulate tasks. You will need to:

- Authenticate with the Workfront API.
- Define the logic to create or update tasks based on data received from [Builder.io](http://Builder.io).

### Example (Node.js + Express):

```javascript
const express = require('express');
const fetch = require('node-fetch');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

app.post('/webhook-handler', async (req, res) => {
  const { data } = req.body; // The data from Builder.io

  // Authentication with Workfront
  const workfrontSession = await fetch('https://yourworkfrontapi.com/login', {
    method: 'POST',
    body: JSON.stringify({
      username: 'your_username',
      password: 'your_password',
    }),
    headers: { 'Content-Type': 'application/json' },
  });

  const sessionData = await workfrontSession.json();

  // Create a Workfront task using Workfront API
  const result = await fetch('https://yourworkfrontapi.com/tasks', {
    method: 'POST',
    body: JSON.stringify({
      name: 'Review New Builder.io Page',
      description: `Please review the new page: ${data.name}`,
      // other task details
    }),
    headers: {
      'Content-Type': 'application/json',
      'SessionID': sessionData.sessionId,
    },
  });

  const response = await result.json();
  res.status(200).json(response);
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

```

### 4. Maintenance and Error Handling

Maintain the middleware/backend with proper error handling, security practices, and logging to ensure that the integration runs smoothly and securely.

By setting up this integration, every time a page is created or published in [Builder.io](http://Builder.io), it can automatically create a task in Adobe Workfront for review, ensuring that all content goes through the necessary approval processes.

Hope this helps!

Thanks,