Builder.io + Workfront Integration

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 and Workfront to do things like:
-Create a Workfront Workflow task to review a page created in builder.io?

  • Publish a page in 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

Builder public api key
go to Builder.io: Visual Development Platform 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!

Hello @jhs129,

Integrating 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. However, 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 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:

1. Setup Webhook in Builder.io

Firstly, you would set up a webhook in Builder.io to trigger when a specific event occurs, such as when a page is created or published.

  • Go to your Builder.io space settings.
  • Navigate to the “Webhooks” section.
  • Create a new webhook 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, 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, 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.

Example (Node.js + Express):

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, 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,