Framer

Connect your Framer projects to improve design visibility in AI search results. Easy setup with Framer's custom code capabilities.

Overview

Our Framer integration allows you to track AI interactions with your Framer-built website. Using Framer's custom code integration, you can add our tracking script to monitor how AI systems interact with your content. This solution works with any Framer site and provides comprehensive tracking across all pages.

Features

Works with all Framer templates and components
Real-time AI visibility analytics
Zero impact on site performance
Automatic tracking of all pages
Identifies all major AI bots and crawlers
Easy installation using Framer's custom code features
Detailed analytics for Framer content
Compatible with Framer's responsive design features

Requirements

Framer website
Admin access to your Framer project
API key from xseek
Website ID from your xseek dashboard

Setup Process

1
Open your Framer project
2
Navigate to Settings > Custom Code
3
Add our tracking script to the <head> section of your site
4
Replace the placeholder values with your API key and website ID
5
Publish your changes to start tracking AI visits

Integration Setup

Important Information

Make sure to replace YOUR_API_KEY and YOUR_WEBSITE_ID with your actual values in the integration code. Your API key can be found in your account settings.

1Access Framer's custom code section

Follow these steps to add custom code to your Framer site:

Open your Framer project in the editor
Click on the "Settings" tab in the right panel (gear icon)
Scroll down to find "Custom Code" or click on "Custom Code" in the sidebar
Look for the section to add code to the "Head" of your site

2Add the tracking script

Copy and paste this code into the head section of your Framer project:

<!-- Add this script to your Framer project via the Custom Code section -->
<script>
  // Function to detect AI bots
  function checkForAIBot() {
    const userAgent = navigator.userAgent;
    
    // Define patterns for all known AI bots
    const AI_BOTS = [
    { name: 'anthropic-ai', pattern: /anthropic-ai/i },
    { name: 'claudebot', pattern: /ClaudeBot/i },
    { name: 'claude-web', pattern: /claude-web/i },

    { name: 'perplexitybot', pattern: /PerplexityBot/i },
    { name: 'perplexity-user', pattern: /Perplexity-User/i },

    { name: 'grokbot', pattern: /GrokBot(?!.*DeepSearch)/i },
    { name: 'grok-search', pattern: /xAI-Grok/i },
    { name: 'grok-deepsearch', pattern: /Grok-DeepSearch/i },

    { name: 'deepseekbot', pattern: /DeepSeekBot/i },

    { name: 'GPTBot', pattern: /GPTBot/i },
    { name: 'chatgpt-user', pattern: /ChatGPT-User/i },
    { name: 'oai-searchbot', pattern: /OAI-SearchBot/i },

    { name: 'google-extended', pattern: /Google-Extended/i },

    { name: 'applebot', pattern: /Applebot(?!-Extended)/i },
    { name: 'applebot-extended', pattern: /Applebot-Extended/i },

    { name: 'meta-external', pattern: /meta-externalagent/i },
    { name: 'meta-externalfetcher', pattern: /meta-externalfetcher/i },

    { name: 'bingbot', pattern: /Bingbot(?!.*AI)/i },
    { name: 'bingpreview', pattern: /bingbot.*Chrome/i },
    { name: 'microsoftpreview', pattern: /MicrosoftPreview/i },

    { name: 'cohere-ai', pattern: /cohere-ai/i },
    { name: 'cohere-training-data-crawler', pattern: /cohere-training-data-crawler/i },

    { name: 'youbot', pattern: /YouBot/i },

    { name: 'duckassistbot', pattern: /DuckAssistBot/i },

    { name: 'semanticscholarbot', pattern: /SemanticScholarBot/i },

    { name: 'ccbot', pattern: /CCBot/i },

    { name: 'ai2bot', pattern: /AI2Bot/i },
    { name: 'ai2bot-dolma', pattern: /AI2Bot-Dolma/i },

    { name: 'aihitbot', pattern: /aiHitBot/i },

    { name: 'amazonbot', pattern: /Amazonbot/i },
    { name: 'novaact', pattern: /NovaAct/i },

    { name: 'brightbot', pattern: /Brightbot/i },

    { name: 'bytespider', pattern: /Bytespider/i },
    { name: 'tiktokspider', pattern: /TikTokSpider/i },

    { name: 'cotoyogi', pattern: /Cotoyogi/i },

    { name: 'crawlspace', pattern: /Crawlspace/i },

    { name: 'pangubot', pattern: /PanguBot/i },
    { name: 'petalbot', pattern: /PetalBot/i },

    { name: 'semrushbot-ocob', pattern: /SemrushBot-OCOB/i },
    { name: 'semrushbot-swa', pattern: /SemrushBot-SWA/i },

    { name: 'sidetrade-indexer', pattern: /Sidetrade indexer bot/i },

    { name: 'timpibot', pattern: /Timpibot/i },

    { name: 'velenpublicwebcrawler', pattern: /VelenPublicWebCrawler/i },

    { name: 'omgili', pattern: /omgili/i },
    { name: 'omgilibot', pattern: /omgilibot/i },
    { name: 'webzio-extended', pattern: /Webzio-Extended/i }
    ];
    
    // Check if the user agent matches any bot pattern
    for (const bot of AI_BOTS) {
      if (bot.pattern.test(userAgent)) {
        // Send data to the tracking API
        fetch('https://api.aiseotracker.com/track-ai-bot', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'x-api-key': 'YOUR_API_KEY', // Replace with your actual API key
          },
          body: JSON.stringify({
            botName: bot.name,
            userAgent: userAgent,
            url: window.location.href,
            referer: document.referrer || undefined,
            websiteId: 'YOUR_WEBSITE_ID', // Replace with your website ID
          }),
        }).catch(error => {
          console.error('Error tracking AI bot:', error);
        });
        
        console.log('AI bot detected:', bot.name);
        break;
      }
    }
  }
  
  // Run the check when the page loads
  window.addEventListener('load', checkForAIBot);
</script>

Ready to go!

Your Framer site is now set up to track AI crawler visits. Visit the xseek dashboard to see your data.

Need more help?

Check our comprehensive documentation for detailed instructions.

View documentation