OpenAI

How to integrate OpenAI with Webflow

OpenAI's GPT models, DALL·E image generation, and Whisper transcription add AI-powered features to Webflow sites. These capabilities enable content generation, intelligent chatbots, and dynamic user experiences that respond to visitor input in real time.

Webflow sites cannot call OpenAI APIs directly from the browser and require a secure backend layer. Options include automation platforms (no coding), chatbot widgets (quick deployment), or custom serverless functions (full control).

The OpenAI API Reference documents all endpoints. The Webflow REST API enables programmatic content management.

Use automation platforms

Automation platforms handle server-side work through visual workflow builders connecting Webflow to OpenAI without code.

Zapier offers four templates, including AI Blog Post Generator, Form to CMS, Order Processing, and Order Conversations. Make provides visual scenario builders with comprehensive Webflow triggers and OpenAI actions. n8n includes Blog Generator and YouTube to Blog templates with self-hosting options.

Webflow CMS plans enable API access for advanced integrations. Design workflows to stay within rate limits through batching or caching.

Embed chatbot widgets

Third-party chatbot platforms integrate OpenAI into Webflow through embed codes requiring no programming. Copy snippets from provider dashboards and paste into the Webflow Code Embed element.

Options include: Botpress (visual flow builders), Voiceflow (free starter plans), Chatbase (custom data training), CustomGPT, Zipchat AI, YourGPT, Elfsight, Landbot, and ChatBot.com.

Build with Webflow and OpenAI APIs

Never put OpenAI API keys in browser JavaScript as attackers can steal them. Use serverless functions to keep keys secure.

Architecture: Webflow Client → Serverless Function → OpenAI API → Response

Deploy on Netlify, Vercel, AWS Lambda, or Cloudflare Workers. Your function accepts Webflow requests, adds API keys server-side, calls OpenAI, and returns responses with proper CORS headers.

Create conversational interfaces

The Chat Completions API powers chatbots. Send messages to POST https://api.openai.com/v1/chat/completions with model selection and conversation history.

Example Netlify function:

import OpenAI from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export const handler = async (event) => {
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 204,
      headers: {
        'Access-Control-Allow-Origin': 'https://yoursite.webflow.io',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'POST, OPTIONS'
      },
      body: ''
    };
  }

  const { prompt } = JSON.parse(event.body);

  try {
    const completion = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [{ role: 'user', content: prompt }],
      max_tokens: 500
    });

    return {
      statusCode: 200,
      headers: { 'Access-Control-Allow-Origin': 'https://yoursite.webflow.io' },
      body: JSON.stringify({ content: completion.choices[0].message.content })
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: JSON.stringify({ error: error.message })
    };
  }
};

GPT-4o Mini provides cost-effective performance for most tasks. Upgrade only for complex reasoning requirements.

Generate content programmatically

Combine Chat Completions API with Webflow CMS API to automate content creation. Publish directly to CMS collections via POST https://api.webflow.com/collections/{collectionid}/items.

Store both OpenAI and Webflow tokens in serverless environment variables, never in client-side code.

Create images with DALL·E

Send prompts to POST https://api.openai.com/v1/images/generations with size and quality parameters. DALL·E 3 offers standard and HD quality. API returns URLs valid for one hour. Download and upload to Webflow's asset management for permanent storage.

Transcribe audio with Whisper

Send audio files to POST https://api.openai.com/v1/audio/transcriptions. Supports MP3, WAV, M4A, MPEG, MPGA, and WebM (25 MB limit).

What you can build

Integrating OpenAI with Webflow lets you build AI-powered content workflows and interactive experiences that connect to your site's CMS and assets.

• AI content management: Generate complete articles with headings and meta descriptions published directly to Webflow CMS
• Product recommendation chatbot: Query e-commerce inventory and respond with filtered product recommendations
• Dynamic image generation: Create hero images with DALL·E that auto-upload to your asset library
• Voice-first forms: Transcribe voice recordings, validate completeness with GPT, and submit structured data to CMS