Ortto

How to integrate Ortto with Webflow

Ortto (formerly Autopilot) is an AI-powered marketing automation and analytics platform that’s used for unifying customer data into a singular system. Connecting Ortto's customer data platform with your Webflow site enables behavioral tracking, lead nurturing campaigns, and automated contact management based on visitor actions.

You can integrate Ortto with Webflow by installing Ortto's JavaScript tracking code in Webflow to monitor page views and user behavior, capture form submissions through embedded widgets or use automation platforms like Zapier and Make, or build custom API integrations for advanced bidirectional synchronization.

Install the Ortto tracking code

Add Ortto's JavaScript tracking script to your Webflow site to enable page view, session, and user identification tracking. This tracking code must be installed before any other Ortto features will function on your site, including capture widgets or form tracking.

Navigate to Project Settings > Custom Code in Webflow and paste your Ortto tracking script in the "Head code" section. According to Webflow's Custom code in head and body tags documentation, this installs the code site-wide. Find your unique tracking code in your Ortto account settings under Data Sources.

For page-specific implementation, add tracking code to individual pages through Page Settings > Custom Code. This approach works for landing pages, testing, or targeted campaigns where you need different Ortto functionality per page.

Capture form submissions with Ortto widgets

After installing the tracking code, capture form data through Ortto's embeddable widgets, tracked forms, or third-party automation platforms.

Ortto supports form capture through three methods. Create forms in Ortto's visual editor and embed the generated code into specific Webflow pages using the Embed element or Custom Code settings.

Configure a Tracked Form in Ortto to automatically capture submissions from your native Webflow forms without rebuilding them. Or use integration platforms like Zapier, Make, n8n, or Pabbly Connect to sync form submissions to Ortto contacts automatically.

Form capture widgets enable you to create forms in Ortto's visual editor, customize fields and styling, then copy the provided embed code. Drag an Embed element from Webflow's Elements panel to your page and paste the code. The form appears exactly where you position the Embed element.

Tracked forms work with your existing Webflow forms. Navigate to Marketing > Capture in your Ortto dashboard and create a new "Tracked Form" widget. Specify the URL of your Webflow page containing the form, and map your Webflow form fields to corresponding Ortto contact fields.

The Ortto tracking code automatically detects submissions on the specified page and captures the form data without requiring any additional code changes.

Additional widget types include bar widgets for sticky notifications, popup widgets for modal overlays, conversation widgets for chat interfaces, and gamified widgets like "Spin the Wheel" for interactive lead generation. Ortto supports 10 widget formats and each follows the same embed process.

Use third-party automation platforms

Integration platforms connect Webflow and Ortto through visual workflow builders without requiring code. These platforms support automation triggered when Webflow forms are submitted or collection items are created. Setup automations using these platforms enable automatic contact creation in Ortto, custom activity tracking, and contact list management.

Zapier provides a visual, point-and-click workflow builder and has a Webflow integration too. Connect your Webflow account through an authorization popup, select a trigger like "New Form Submission," then configure Ortto actions such as creating contacts or adding them to journeys.

The platform includes field mapping through dropdown menus, test functionality to verify connections before activation, and works entirely within a visual interface with no coding required.

Make provides multi-step workflow automation through a visual diagram interface. Create workflows with conditional logic, filters, and routers. In Make's app directory, Ortto appears under its previous brand name "Autopilot by Ortto," which reflects Ortto's rebranding from its original Autopilot name. Both names reference the same platform with identical functionality.

Pabbly Connect provides the simplest setup through pre-built templates for common use cases. Choose a template like "New Form Submission in Webflow → Create Contact in Ortto," connect your accounts through OAuth popups, and configure field mapping. This approach works well for standard workflows without requiring code knowledge.

n8n provides full API access for custom implementations through an open-source workflow automation platform. The Webflow node includes dedicated functionality for form submissions, collection items, and CMS operations, while Ortto integration is available through both direct HTTP Request nodes calling the REST API for advanced customization.

This balance of pre-built components and direct API access enables both intuitive workflows for standard use cases and complete customization for complex requirements.

Integration platforms enable several common workflows. Sync form submissions from Webflow to Ortto contacts automatically, or add new contacts to specific Ortto journeys or lists when Webflow forms are submitted. You can create custom activities in Ortto based on Webflow form events and page interactions, or pdate Ortto contact attributes when Webflow collection items change. You can also map Webflow form fields to Ortto contact fields through workflow builders.

Integration platforms operate on trigger-based workflows rather than real-time synchronization. Ortto webhooks include 3 retry attempts with 5-second timeouts, which can create delays from several seconds to minutes between Webflow events and Ortto updates.

Build with Webflow and Ortto APIs

Build custom integrations using Ortto and Webflow APIs when you need capabilities beyond standard automation platforms, like real-time bidirectional synchronization, complex data transformations, or white-label implementations. According to Ortto's developer documentation, the REST API enables behavioral tracking, activity-based workflow triggers, and custom contact field management that automation platforms can't fully support.

API implementations enable use cases like syncing custom CMS fields with Ortto contact attributes in real-time, creating white-label embedded forms with your branding, and building middleware that transforms data between Webflow's collections and Ortto's segmentation engine.

Custom API implementations combine the Ortto REST API with Webflow's Data API for bidirectional synchronization, behavioral tracking, and activity-based workflow triggers.

Authentication requirements follow different approaches for each platform. Ortto uses custom API key authentication, requiring the header X-Api-Key: YOUR-PRIVATE-API-KEY with Content-Type: application/json for requests containing a body. Each API key is unique and tied to a single Ortto account instance, and all requests use region-specific API endpoints (https://api.ap3api.com/ for default, https://api.au.ap3api.com/ for Australia, or https://api.eu.ap3api.com/ for Europe).

Webflow implements OAuth 2.0 Bearer token authentication with the header format Authorization: Bearer YOUR_TOKEN, supporting both Site Tokens for single-site integrations and full OAuth 2.0 implementation for multi-site or marketplace integrations. All Webflow API v2 requests use the base URL https://api.webflow.com/v2/.

Regional endpoints for Ortto optimize performance based on account location. Use https://api.ap3api.com/ for default regions, https://api.au.ap3api.com/ for Australia, or https://api.eu.ap3api.com/ for Europe. Configure the correct endpoint based on your account location.

Key API capabilities include contact creation and updates via POST /v1/person/merge for syncing form data, custom activity tracking through POST /v1/activities/create for recording user behaviors, Webflow form webhooks configured with POST /sites/{site_id}/webhooks for real-time submission notifications, and CMS item management through GET, POST, and PATCH endpoints for collection item operations.

Sync form submissions to Ortto contacts

Configure Webflow webhooks to receive form submission notifications by setting up a webhook trigger with triggerType: "form_submission" that routes POST requests containing form data to your middleware endpoint. According to Webflow's Webhooks Documentation, webhook payloads include formId and submissionId, which can be used to retrieve full form data. For non-technical users, this custom webhook approach is not recommended.

You can use pre-built integrations through Zapier, Make, or Pabbly Connect instead. For developers, once form data reaches your middleware, call Ortto's merge endpoint (POST /v1/person/merge) to create or update contact records using the strongly-typed field mapping system (str::email, str::first, etc.) documented in Ortto's Creating and Updating People guide.

Your integration middleware receives the webhook payload from Webflow, maps form fields to Ortto's strongly-typed field system using prefixes like str:: for strings, int:: for integers, and dtz:: for datetimes as documented in Ortto's Creating and Updating People guide, then calls POST /v1/person/merge with the appropriate regional endpoint (https://api.ap3api.com/v1/person/merge for default, https://api.au.ap3api.com/v1/person/merge for Australia, or https://api.eu.ap3api.com/v1/person/merge for Europe) with merge_by: ["str::email"] to prevent duplicate records while supporting additional parameters like merge_strategy for conflict resolution and async for asynchronous processing as needed for production implementations.

Field mapping example:

{
  "people": [{
    "fields": {
      "str::email": "user@example.com",
      "str::first": "John",
      "str::last": "Doe",
      "str:cm:company": "Acme Corp"
    }
  }],
  "merge_by": ["str::email"]
}

Update Webflow CMS from Ortto changes

Configure Ortto webhooks within journeys or playbooks by adding a "Send to Webhook" action node to notify your middleware when contact data changes. Your endpoint receives the contact data with fields like contact_id, email, and campaign_id, then queries Webflow's CMS using GET /v2/collections/{collection_id}/items to find matching records, then updates items with PATCH /v2/collections/{collection_id}/items/{item_id} or creates new ones with POST /v2/collections/{collection_id}/items. Finally, publish the updated items using POST /v2/collections/{collection_id}/items/publish to make changes live.

Publishing requires a separate API call to POST /collections/{collection_id}/items/publish to make changes visible on your published site, as Webflow maintains staged and live versions independently. Include the item IDs in an array (itemIds) in the request body when calling this endpoint.

Track custom behavioral events

Create custom activity definitions in Ortto to track events beyond standard form submissions. Define activities like "Pricing Page Viewed" or "Demo Video Watched" using POST /v1/definitions/activity/create, then record individual events with POST /v1/activities/create including the contact's email and activity attributes.

Combine this with Webflow's client-side JavaScript to capture button clicks, scroll depth, video engagement, or other interactions using custom activity tracking. Send the data to your API endpoint, which forwards it to Ortto's activity tracking system via the POST /v1/activities/create endpoint. These activities feed into segmentation rules, lead scoring models, and campaign triggers.

Using third-party automation platforms like Zapier, Make, or n8n, you can build workflows that track prospect activities on Webflow and sync them to Ortto for automating your marketing. Possible implementation scenarios include creating custom activity tracking for pricing page visits, setting up notifications based on behavioral triggers, and segmenting audiences based on Webflow engagement patterns. These require custom workflow configuration through automation platforms or direct API implementation rather than out-of-the-box features.

What you can build

Integrating Ortto with Webflow through embedding Ortto's tracking code and using third-party automation platforms like Zapier or Make enables automated marketing workflows that respond to website visitor behavior, turning site traffic into nurtured leads through personalized campaigns.

• Webinar registration and nurturing system: Build landing pages in Webflow with registration forms that automatically add registrants to Ortto and trigger confirmation emails, reminder sequences, and post-webinar follow-up campaigns while tracking attendance using Ortto's custom activity feature through your automation workflow
• Lead scoring and contact management: Track form submissions and website interactions from your Webflow site through Ortto's customer data platform, automatically creating or updating contact records with engagement data while using Ortto's workflow automation to trigger follow-up actions when prospects reach qualification thresholds or exhibit target behaviors
• Behavioral email sequences: Send targeted campaigns triggered by specific page visits where abandoned pricing page visitors receive ROI calculators, blog readers get content recommendations, and returning visitors see special offers by tracking visitor behavior with Ortto's JavaScript code and configuring automated workflows in Ortto's journey builder
• Customer profile directories: Sync Ortto contact data to Webflow CMS collections to display customer testimonials, case study pages, or partner directories, requiring continuous synchronization infrastructure through custom backend middleware or dedicated automation platforms managing bidirectional sync rather than simple one-time setup