Skip to main content

Webflow Integration

Updated over 2 weeks ago

Leverage Webflow Integration with Hatz AI: Features and Tools Guide

The integration of Webflow and Hatz AI unlocks a wealth of opportunities for users looking to supercharge their workflow with the power of Hatz AI. Whether you're managing website content, streamlining your marketing efforts, or automating data collection processes, this fusion brings exceptional capabilities to your fingertips.

This guide will walk you through the features and tools provided by the Webflow tool with Hatz AI's capabilities.


What is the Webflow Tool?

The Webflow tool is a feature-rich integration that allows users to connect and interact directly with their Webflow sites. It supports tools for managing sites, pages, collections, items, and form submissions. With Hatz AI now connected to this tool, you can automate tasks, gain predictive insights, and perform intelligent operations across your Webflow data.


How and What Can a User Access?

Each user on the Hatz platform is required to connect their individual Webflow account through the secure integration setup detailed below, following Webflow's authentication process.

This process ensures that the integration strictly complies with Webflow’s security protocols while respecting the access permissions and rules assigned to each user’s account.

It’s important to note that the Hatz Webflow integration will never exceed the access levels granted to the user within Webflow, guaranteeing alignment with the platform’s governance policies. As a result, outcomes and available features may vary depending on each user’s specific permissions and authenticated access.

Features of the Webflow Integration Tool

1. Comprehensive Site and Page Management

  • List Webflow Sites: Retrieve a list of all Webflow sites accessible to you. This is the starting point for interacting with your sites' content and settings.

  • List Pages: Get a list of all static and dynamic pages for a specified Webflow site. This is useful for site audits, sitemap generation, and monitoring page updates.

2. Advanced CMS Collection and Item Management

  • List Collection Items: Retrieve items from a specified collection, such as blog posts, products, or portfolio pieces.

  • Create Collection Items: Create new items within a specific Webflow collection, including setting field data and draft status.

  • Update Collection Items: Modify existing items in a Webflow collection, allowing you to update content, change status, and more.

  • Get Collection Details: Retrieve detailed information about a specific collection, including its structure and schema.

  • Get Collection Item: Fetch detailed information about a single item within a collection.

3. Form Submission Management

  • List Form Submissions: Retrieve a list of all form submissions for a specific Webflow site, allowing you to process and analyze user-submitted data.


Why Use the Webflow Integration with Hatz AI?

Connecting your Webflow data to and leveraging Hatz AI allows you to:

  • Reduce Time Spent on Manual Content Entry: Automate repetitive tasks like creating and updating collection items.

  • Drive Data-Driven Decisions: AI-powered analytics uncover actionable trends and patterns hidden in your form submissions and site data.

  • Enhance Productivity: Use intelligent automation to handle workflows and focus your team on high-value activities like content creation and site optimization.

  • Personalize User Experiences: Utilize AI to analyze form submissions and user behavior, enabling highly personalized content and interactions.

  • Streamline Operations: The seamless integration ensures all your Webflow data is easily accessible and actionable.

Real-Life Use Cases

Scenario 1: Automated Content Updates

With the Webflow toolkit, you can automatically create new collection items from external data sources. For example, you could use Hatz AI to monitor a news feed and automatically create new blog posts on your Webflow site whenever a new article is published.

Scenario 2: AI-Powered Data Analysis

Capture form submissions from your Webflow site and use Hatz AI to analyze the data in real-time. You could, for instance, automatically categorize and prioritize customer inquiries, or analyze survey responses to identify key trends and sentiment.

Scenario 3: Intelligent Site Monitoring

Regularly list all pages on your site and use Hatz AI to monitor them for changes or issues. You could set up a workflow to notify you if a page is accidentally unpublished or if its metadata changes unexpectedly.


Webflow & Hatz AI: Use Case List

This list outlines practical applications of the Hatz AI and Webflow integration. It is categorized by the core features available through the tool, providing examples of direct Chat Prompts for quick, ad-hoc tasks and Workflow Automations for more structured, repeatable processes.

1. Site and Page Management

Use Case

Description

Chat Prompt Example

Workflow for Automation

Quick Site Inventory

Instantly get a list of all your Webflow sites to quickly find the one you need to work on.

List all of my Webflow sites.

Site & Collection Mapping Workflow:
1. Fetches all accessible Webflow sites.
2. For each site, it retrieves a list of all its CMS Collections.
3. Presents a consolidated report showing which collections belong to which site, helping new team members understand the site structures.

Content & SEO Audit

Retrieve a complete list of pages on a specific site to check for completeness, identify old pages needing updates, or perform a basic SEO check.

List all pages on the 'Hatz Marketing' site and identify any that might be missing a meta description.

SEO Health Check Workflow:
1. Prompts the user for a Site Name.
2. Fetches all pages for that site using the List Pages tool.
3. Hatz AI analyzes the list to identify pages with short titles, missing slugs, or other potential SEO issues.
4. Provides a prioritized list of pages that need an SEO review.

Site Monitoring

Check for unintentional changes to your site, such as pages being unpublished or critical page names being altered.

List all pages on my main website and confirm the 'Pricing' page is still published.

Page Status Verification Workflow:
1. User provides a list of critical page names (e.g., Home, Pricing, Contact).
2. The workflow fetches all pages on the specified site.
3. It checks if each critical page from the user's list exists and is published.
4. Reports back with a "All Clear" message or flags any missing/unpublished pages.

2. CMS Collection and Item Management

Use Case

Description

Chat Prompt Example

Workflow for Automation

Rapid Content Creation

Create a new CMS item, like a blog post or a team member profile, directly from chat without opening the Webflow Designer or Editor.

Create a new blog post on my main site in the 'Articles' collection. Title is "The Power of AI in Web Design". Set it as a draft.

New Blog Post Workflow:
1. Prompts the user for the blog post Title.
2. Prompts for the main body content (user can paste it in).
3. Asks if the post should be a draft or published immediately.
4. Creates the new item in the specified 'Blog Posts' collection.
5. Confirms that the item was created successfully.

Bulk Content Updates

Update multiple CMS items at once. For example, add a promotional banner link to all blog posts published before a certain date.

Find the collection item named 'Q1 Product Launch' in my 'Announcements' collection and update its status to 'Archived'.

Content Refresh Workflow:
1. Prompts user to identify which collection to update (e.g., 'Services').
2. Asks for the field to update (e.g., 'Service Price') and the new value.
3. The workflow fetches all items in that collection.
4. It iterates through each item and uses the Update Collection Item tool to apply the change.
5. Reports back on how many items were updated.

Content Repurposing

Take an existing piece of content, like a long-form article, and use AI to create a new, related item in a different collection.

Get the content from the blog post named "Deep Dive into Automation". Summarize it into five bullet points and create a new item in my "Social Media Posts" collection.

Blog-to-FAQ Workflow:
1. Prompts the user for the name of a blog post.
2. Uses Get Collection Item to retrieve the full article content.
3. Hatz AI analyzes the content and generates a list of potential question-and-answer pairs.
4. For each Q&A pair, the workflow uses Create Collection Item to add a new entry to the 'FAQ' collection on the website.

Data-Driven Item Creation

Use AI to draft a new CMS item based on structured data, such as creating a case study from key metrics.

Create a new case study in the 'Portfolio' collection for 'Client XYZ'. Success metric: 'Increased traffic by 40%'. Tool used: 'Hatz AI Automation'. Draft a short description based on this.

New Team Member Profile Workflow:
1. Prompts for the new team member's name, title, and department.
2. Hatz AI generates a standardized, friendly bio based on the details.
3. Uses Create Collection Item to add the new profile to the 'Team' collection.

3. Form Submission Management

Use Case

Description

Chat Prompt Example

Workflow for Automation

Lead Triage & Summary

Quickly analyze new leads from a contact form to understand their needs and prioritize follow-up.

Pull the last 10 submissions from the 'Contact Us' form and categorize them into 'Sales Inquiry', 'Support', or 'Other'.

Daily Lead Summary Workflow:
1. Fetches all new form submissions from the 'Sales Inquiry' form since the previous day.
2. Hatz AI reads the message content from each submission.
3. It generates a one-sentence summary for each lead and identifies the urgency.
4. Presents a consolidated report to the user, sorted by urgency.

User Feedback Analysis

Process submissions from a survey or feedback form to identify trends, sentiment, and common themes without manually reading every entry.

Summarize all feedback from the 'Feature Request' form this month. What are the top 3 most requested features?

Monthly Feedback Report Workflow:
1. Fetches all submissions from a specified survey form for the last 30 days.
2. Hatz AI analyzes all free-text responses for sentiment (positive/negative) and key topics.
3. It groups similar feedback together and identifies the most common themes.
4. Generates and presents a summary report with key insights and illustrative quotes.

Data Extraction

Pull specific information from a batch of form submissions for external use, like creating a mailing list or a call sheet.

List the name and email address for everyone who submitted the 'Webinar Signup' form on the 'Marketing Site' in the last week.

Export-Ready Data Prep Workflow:
1. Prompts the user for the site and form name.
2. Fetches all submissions from the specified form.
3. Hatz AI extracts and cleans up the requested data fields (e.g., Name, Email, Company).
4. Presents the data in a clean, structured list that the user can easily copy into a spreadsheet or other tool.

Did this answer your question?