Azwedo

How to connect Azwedo with Webflow

Azwedo provides file management and design tools that help agencies and freelancers build Webflow sites faster. Cllouda handles file uploads through API integration, while Modulify generates structural code exports and Text Wizard AI creates content directly within Webflow.

Connect Azwedo with Webflow through Modulify's Quick Webflow Export for code-based site structures, Text Wizard AI for content generation, or Cllouda API for server-side file management. Modulify and Text Wizard AI work through one-time exports, while Cllouda requires middleware to handle webhook-triggered file storage.

Use Modulify's Quick Webflow Export

Modulify generates sitemaps, wireframes, and design systems with AI, then provides HTML, CSS, and JavaScript code through the Quick Webflow Export feature. You paste this code into Webflow's custom code areas using Code Embed elements, page-specific custom code, or site-wide custom code in the head or body tags. Agencies use this to compress project kickoff from days to minutes when starting client projects that need structured foundations.

The workflow starts in Modulify where you define project parameters. The platform generates complete site structures, then provides code through the Quick Webflow Export feature. You paste this code into Webflow using one of three placement methods.

Placement options for exported code:

• Code Embed element: Drag the Code Embed component from Webflow's Add panel, paste exported code, and place it on your canvas
• Page-specific custom code: Add code to individual page settings under Custom Code for single-page implementations
• Site-wide custom code: Paste code in Site Settings > Custom Code to apply across all pages (requires Core, Growth, Agency, or Freelancer Workspace plans, or active Site plans)

Changes made in Modulify require re-exporting and re-pasting code manually. No live connection exists between platforms.

Generate content with Text Wizard AI

Text Wizard AI generates content using AI models directly within Webflow. The tool offers multiple writing styles including formal, creative, concise, and academic tones. You generate content through customizable prompts, then paste results into Webflow text elements or rich text fields.

The integration operates through a one-time export workflow rather than direct API connection or live embedding. Generate text in Text Wizard AI, refine through iterative prompts, then paste into standard Webflow text elements, rich text blocks, or CMS fields. No coding knowledge required.

Content capabilities:

• Multiple writing style options for different audiences
• Customizable prompt parameters for tone and length
• Iterative refinement within the app interface
• Direct paste into text elements or CMS fields

Build with Webflow and Cllouda API

The Cllouda API handles server-side file management through the file upload endpoint. You can integrate it with Webflow by configuring webhooks to detect form submissions, CMS changes, or e-commerce orders, then process files through Cllouda's upload endpoint. This creates permanent file URLs that you can store back in the Webflow CMS or send to customers. Cllouda currently supports only .webp, .jpeg, .jpg, and .png file formats.

API integration requires middleware because Cllouda uses non-standard authentication (tokens in JSON body) while Webflow uses Bearer headers. Build a server that receives Webflow webhook payloads, processes files through Cllouda, and updates Webflow data through the CMS API.

Configure authentication through the Cllouda API usage guide and Webflow's authentication reference. Azwedo uses a non-standard authentication pattern where tokens must be included in the JSON request body as { "token": "YOUR_API_KEY" } rather than HTTP headers, while Webflow uses standard Bearer tokens in the Authorization header.

Store form submission files

Form submissions often include file uploads that need permanent storage. Configure a Webflow webhook with form_submission trigger type, which fires when users submit forms. Your middleware receives the webhook payload, downloads the file from the URL Webflow provides, encodes it to base64, and sends it to Cllouda's upload endpoint at POST https://cllouda-api.azwedo.com/api/file/upload. Cllouda currently supports only .webp, .jpeg, .jpg, and .png file formats.

Important limitation: Standard Webflow form submissions do not transmit binary file data to webhooks. Webflow stores uploaded files in its own storage and only sends file URLs in the webhook payload. Your middleware must download files from these URLs before uploading to Cllouda.

Alternative approaches to enable file uploads:

• Add custom code to set enctype="multipart/form-data" on your form, then use middleware that handles multipart form data parsing
• Use third-party form services like Form-Data or Getform that handle file uploads differently
• Download files from Webflow's storage URLs provided in the webhook payload before uploading to Cllouda

// Webhook handler example - downloads file from Webflow URL
app.post('/webhook/form-handler', async (req, res) => {
  const formData = req.body;

  // Webflow provides file URL in webhook payload, not binary data
  // Field structure varies - check your webhook payload
  const fileUrl = formData.data?.fileUrl; // Adjust based on actual payload structure

  if (fileUrl) {
    // Download file from Webflow's storage
    const fileResponse = await fetch(fileUrl);
    const fileBuffer = await fileResponse.buffer();
    const base64File = fileBuffer.toString('base64');

    // Upload to Cllouda
    const response = await fetch('https://cllouda-api.azwedo.com/api/file/upload', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        token: process.env.AZWEDO_TOKEN,
        data: {
          fileBase64: base64File,
          fileName: 'uploaded-file.png',
          fileType: '.png'
        }
      })
    });

    const result = await response.json();
    console.log('File stored:', result.data.publicFileUrl);
  }

  res.status(200).send('OK');
});

Configure webhooks through Webflow's webhooks API with sites:write scope. Upload files using Cllouda's upload endpoint, which currently supports .webp, .jpeg, .jpg, and .png formats.

Cllouda tokens must stay server-side. Never expose tokens in client-side code.

Process media files when CMS content changes

CMS content changes can trigger file processing workflows through Webflow webhooks. When editors create or update collection items with image fields, Webflow webhooks notify your middleware with trigger types like collection_item_created or collection_item_changed. You can fetch the original image, process it, upload to Cllouda for permanent storage using the POST https://cllouda-api.azwedo.com/api/file/upload endpoint, then update the CMS item with the new public URL returned by the API.

Webflow provides webhook trigger types:

• collection_item_created : New items added to collections
• collection_item_changed : Existing items updated
• collection_item_deleted : Items removed from collections
• collection_item_unpublished : Items unpublished from live site

Update CMS items after file processing using Webflow's CMS API with PUT /collections/{collection_id}/items/{item_id}.

Generate e-commerce order receipts

E-commerce orders can trigger receipt generation and storage. Configure an ecomm_new_order webhook that fires when customers complete purchases. Your middleware receives order data, generates a receipt image, uploads it to Cllouda (supporting .jpeg, .jpg, .png, and .webp formats), and emails the permanent URL to customers.

You can configure webhooks to trigger on ecomm_new_order events and access order details through webhook payloads. Generate receipt images server-side using libraries like Puppeteer or Sharp, encode to base64, then upload through the Cllouda file upload endpoint. Cllouda currently supports only .webp, .jpeg, .jpg, and .png formats.

Cllouda documentation only confirms support for image formats (.webp, .jpeg, .jpg, .png). PDF receipt support is not documented.

What you can build

Integrating Azwedo with Webflow creates one-time code export workflows and file management through Cllouda API, which handles form submission file storage and CMS event-driven processing.

• Agency project foundations: Generate complete site structures with Modulify's AI-powered sitemap and wireframe tools, export to Webflow code, and start client projects with standardized navigation, page layouts, and design system foundations already in place
• Form-to-storage workflows: Build contact forms or application pages where file uploads get stored permanently through Cllouda, returning public URLs you can save to your CMS or email to administrators
• Content variation systems: Create marketing pages with multiple content versions in different tones using Text Wizard AI (formal for enterprise, creative for startups, concise for mobile), then test which performs better through A/B testing tools
• E-commerce receipt archives: Store order confirmation images generated from purchase data, uploaded automatically to Cllouda when customers complete checkout through Webflow's ecomm_new_order webhook