Webflow
+ Pictify

Generate dynamic images for Webflow CMS collections.

CMS Platforms

About Integration

Connect Pictify to Webflow via webhooks or Zapier to generate images for CMS collection items. Perfect for blogs, portfolios, and directories that need consistent, branded social images.

Key Capabilities

Webhook support

CMS collection integration

Custom field mapping

Zapier connection

Common Use Cases

Collection item images

Dynamic directories

Portfolio showcases

Integration Guide

20 minutes

Prerequisites

Webflow site with CMS
A Pictify account with an API key
A template created in Pictify

Add a CMS Field for OG Image

First, add a field to your CMS collection to store the generated image URL.

Code

1. Go to your Webflow project → CMS Collections
2. Select your collection (e.g., "Blog Posts")
3. Click "Add New Field"
4. Choose "Plain Text" or "Link" field type
5. Name it "OG Image URL" or "Generated Social Image"
6. Save the collection

Use a Link field if you want Webflow to validate it as a URL.

Set Up Zapier Integration

Connect Webflow to Pictify using Zapier for no-code automation.

Code

1. Go to zapier.com and create a new Zap
2. Trigger: Choose "Webflow"
   - Event: "New CMS Item" or "Updated CMS Item"
   - Connect your Webflow account
   - Select your site and collection

3. Action: Choose "Webhooks by Zapier"
   - Event: "POST"
   - URL: https://api.pictify.io/v1/render
   - Headers:
     Authorization: Bearer YOUR_PICTIFY_API_KEY
     Content-Type: application/json
   - Body:
     {
       "templateId": "your-template-id",
       "variables": {
         "title": "{{name}}",
         "description": "{{excerpt}}",
         "image": "{{featured_image}}"
       }
     }

Use Zapier's variable picker to map Webflow fields to template variables.

Update Webflow with Generated Image

Add a second Zapier action to write the image URL back to Webflow.

Code

Add another action step in your Zap:

1. Action: Choose "Webflow"
   - Event: "Update CMS Item"
   - Connect same Webflow account
   - Site: Your site
   - Collection: Same collection

2. Configure the update:
   - Item ID: {{item_id}} from trigger
   - OG Image URL: {{imageUrl}} from Pictify response

3. Turn on your Zap

// Now when you add/update a CMS item:
// 1. Zapier triggers
// 2. Pictify generates the image
// 3. Zapier updates Webflow with the URL

Add a delay step between Pictify and Webflow if you experience timing issues.

Alternative: Use Make (Integromat)

For more complex workflows, use Make instead of Zapier.

Code

In Make.com:

1. Create a new Scenario
2. Add Webflow module: "Watch CMS Items"
3. Add HTTP module for Pictify:
   - URL: https://api.pictify.io/v1/render
   - Method: POST
   - Headers: Authorization: Bearer YOUR_KEY
   - Body: JSON with template and variables

4. Add Webflow module: "Update a CMS Item"
   - Map the imageUrl from Pictify response

5. Enable the scenario

// Make advantages:
// - Visual workflow builder
// - Better error handling
// - Conditional logic support

Add OG Meta Tags in Webflow

Configure your Webflow pages to use the generated OG image.

Code

1. Go to your CMS collection template page
2. Click the Settings icon (gear) in the top left
3. Scroll to "Open Graph Settings"
4. For "OG Image":
   - Click "Get OG Image from [Collection]"
   - Select your "OG Image URL" field

5. Alternatively, use custom code in Page Settings:
   <meta property="og:image" content="{{wf {&quot;path&quot;:&quot;og-image-url&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}" />

6. Publish your site

Webflow's OG settings automatically add the meta tags to your page head.

Direct API Integration (Advanced)

For developers: integrate directly without Zapier.

Code

// Using Webflow's webhook feature + a serverless function:

// 1. In Webflow: Site Settings → Integrations → Add Webhook
// - Trigger: CMS Item Created
// - URL: Your serverless function URL

// 2. Your serverless function (e.g., Vercel):
export default async function handler(req, res) {
  const item = req.body;

  // Generate image with Pictify
  const pictifyRes = await fetch('https://api.pictify.io/v1/render', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer ' + process.env.PICTIFY_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      templateId: 'your-template-id',
      variables: {
        title: item.name,
        description: item.excerpt
      }
    })
  });

  const { imageUrl } = await pictifyRes.json();

  // Update Webflow CMS item
  await fetch('https://api.webflow.com/collections/{collection_id}/items/{item_id}', {
    method: 'PATCH',
    headers: {
      'Authorization': 'Bearer ' + process.env.WEBFLOW_API_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      fields: { 'og-image-url': imageUrl }
    })
  });

  res.status(200).json({ success: true });
}

This gives you full control but requires hosting a serverless function.

Test and Publish

Verify the integration works end-to-end.

Code

1. Add a new CMS item in Webflow
2. Fill in required fields (title, excerpt, etc.)
3. Save and publish the item
4. Wait 30-60 seconds for the automation to run
5. Check the CMS item - OG Image URL should be populated
6. Publish your Webflow site
7. Test with social debuggers:
   - Facebook: developers.facebook.com/tools/debug/
   - Twitter: cards-dev.twitter.com/validator

Remember to publish your site after CMS updates for changes to go live.