About Copy Page for AI
If you've browsed GitBook or other popular documentation sites, you've likely seen the option to copy an entire page in Markdown format for LLMs and it's incredibly useful.That's why I recreated this Copy Documentation button for Framer from scratch, with extensive customization options and flexible behavior.All that's left is for you to add it to your documentation site or blog and give your users a faster way to share content with AI tools.
Instructions
Getting Started:
Copy and paste the component into your Framer project
Place it anywhere on your page (typically in the header or navigation). Note: The parent wrapper (or any ancestor container) must have its overflow set to "visible"; otherwise, the dropdown will not be visible.
Choose between Split Button or Dropdown Only mode in the Button Mode control
Customize dropdown menu items by reordering or adding dividers in the Menu Items control
Configure copy behavior (exclude frames, and even you can remove headers/footers) in Copy Settings
Set up AI prompts and your GitHub URL(optional) in their respective settings
Style the button, dropdown, and menu items using the comprehensive styling controls
Preview the dropdown styling on canvas using the Canvas Preview toggle
Now Publish your site and that's it.
This works as a Copy Page Markdown button, a documentation copy button, and a flexible page copy utility for LLM or AI.
How It Works
Properties Control
Button Mode: Toggle between split button (action + dropdown) or dropdown-only layout
Main Action: Choose what the primary button does (Copy Page, ChatGPT, Claude, Gemini, etc.) - visible only in split mode
Button Text: Customize the button label
Menu Items: Reorder dropdown options and insert dividers for better organization
Custom Icons: Upload your own icons to replace default SVG logos (ChatGPT, Gemini AI, Claude AI, Perplexity AI, Grok AI, Google AI, etc.)
Copy Settings:
Exclude specific frames by name (comma-separated)
Remove header/footer HTML tags
Include page URL in copied content
Converts HTML to Markdown for clean content export
Automatically supports copy to clipboard
AI Settings:
Custom AI prompt text sent to AI services
Option to append page URL to prompts
Open in New Tab: Control link behavior
GitHub URL: Repository link for the GitHub menu option
Styling Controls:
Canvas Preview: Show dropdown on canvas for easier styling
Icon: Configure size and color for all icons
Button Style: Colors, padding, borders, shadows, spacing
Dropdown Style: Background, blur, shadow, width modes, alignment
Item Style: Individual menu item appearance including hover states
Divider Style: Customize both menu dividers and split button separator
Font Style: Separate font controls for button text, menu titles, and descriptions
Animation: Customize transition timing and spring physics
Key Features
Smart Content Conversion:
AI-Optimized Markdown: Converts HTML to clean structured Markdown for LLMs
Intelligent Filtering: Exclude headers, footers, or specific frames
Table Support: Preserves table structure in Markdown
Code Block Preservation: Keeps formatting for technical content
Dual Layout Modes:
Split Button: Main action + dropdown toggle
Dropdown Only: Compact layout with all options inside the menu
Interactive States
Loading animation with spinner
Success feedback with checkmark + "Copied!"
Hover effects, focus states, smooth transitions
AI Service Integration
Pre-configured: ChatGPT, Claude, Gemini, Perplexity, Grok, Google AI
Custom prompts per service
Optional URL injection
GitHub integration for documentation workflows
User Experience
Keyboard navigation
ARIA accessibility support
Responsive layout
Canvas preview for styling inside Framer editor
Customization
8 property control groups
40+ styling options
Custom icons per AI/LLM
Flexible dropdown alignment
Adjustable dropdown width
Use Cases
Documentation Sites
Let users copy docs into AI tools
Acts as a familiar documentation copy button
Works like GitBook-style Copy Page Markdown
Product Pages
Send product content to ChatGPT for any question related to product
Use custom AI prompts for comparisons
Blog & Articles
One-click Copy as MD for summarization
Supports research workflows with Perplexity or Claude
Educational Content
Help students copy tutorial's content to AI to ask question related to that.
Clean Markdown for notes and study tools
Made with ❤️ by Soyeb
Refund Policy: Due to the digital nature of these components, all sales are final, and once delivered they cannot be returned or refunded. Please review product details and demos before purchasing, and feel free to reach out if anything is unclear.
If you have any questions, need a custom Framer component, want clarification, or run into any issues, you can always reach me out at heysoyebali@gmail.com. I’m here to help.
