Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.
Create an animated GIF from a short creative brief, preview it, and add it to your Webflow page. The extension uses Webflow’s native Assets and Image APIs; it does not add custom scripts to your published site.
Native Webflow Designer generation, recovery, resizing, and insertion have been validated.
Marketplace submission remains pending.
Build and install
Build the Designer Extension with the official Webflow CLI and follow the development-install
instructions.
Open the extension in the Webflow Designer and select an element after which to add the GIF.
Enter your Magic Hour API key and a creative brief of up to 500 characters.
Review the external-processing and API-credit disclosure, agree, then choose Generate GIF.
Preview the completed GIF. Choose Add GIF to Webflow to upload it into Webflow Assets and insert a native Image after your selection. Existing content stays in place.
The extension is free; generation uses your Magic Hour API credits. The AI GIF Generator currently charges 50 credits per generation. Check API pricing for current plan and credit requirements.Only your entered prompt is sent to Magic Hour. The extension does not scan or export site content. Your API key and prompt stay in the current extension’s memory; they are not written to browser or shared project storage. Generated media stays in the preview until you explicitly add it to Webflow. The key is never attached to Webflow asset-upload requests. See Magic Hour’s privacy policy.
Webflow assets are publicly accessible, including before the page is published. Add only content
you intend to make public. GIF files must fit Webflow’s 4 MB image-asset limit. Oversized
animations are resized locally before preview and upload, preserving frames, timing, and looping.
The original stays in Magic Hour; resizing does not submit another generation.
The accepted project ID appears before polling. Stop waiting stops local waiting while the Magic Hour job continues. Keep the project ID: closing the extension clears its memory. Enter the same ID under Resume an existing GIF to retrieve the existing job without another generation charge.Paid generation requests are never automatically retried. If submission is interrupted before an ID is returned, check your Magic Hour account history before trying again. An upload or insertion error does not require a new generation. If an insertion response is lost, check the page before adding again to avoid a duplicate.The finished GIF is copied into Webflow storage when you add it. Your published asset does not depend on an expiring Magic Hour download URL. Native MP4 asset upload is not part of this extension.Need help? Contact support@magichour.ai.
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Magic Hour API Docs","description":"Easily generate videos, images, and audio using Magic Hour's API. Follow our documentation to seamlessly integrate AI content creation into your applications.","colors":{"primary":"#3b82f6","light":"#0564ff","dark":"#3b82f6"},"logo":{"light":"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-light.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=1f167e30baf11927bc2e0932411e455b","dark":"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-dark.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=15c8bda28931ac4e1e2fab2c0ba6f0d5"},"favicon":"https://mintcdn.com/magichour/kbUwXh9ksnVyRSci/icons/favicon.png?fit=max\u0026auto=format\u0026n=kbUwXh9ksnVyRSci\u0026q=85\u0026s=c4fda903b24dd7067dadd1bb75508987","appearance":{"default":"dark","strict":false},"background":{"decoration":"gradient"},"navbar":{"links":[{"href":"mailto:support@magichour.ai","label":"Support"}],"primary":{"type":"button","label":"Get API key","href":"https://magichour.ai/developer?tab=api-keys\u0026ref=docs-navbar\u0026utm_source=docs\u0026utm_medium=referral\u0026utm_campaign=navbar"}},"footer":{"socials":{"website":"https://magichour.ai/?utm_source=docs\u0026utm_medium=referral\u0026utm_campaign=footer","x":"https://x.com/magichourai","github":"https://github.com/magichourhq","linkedin":"https://linkedin.com/company/magichour","instagram":"https://instagram.com/magichourai","youtube":"https://youtube.com/@magichourai"}},"seo":{"metatags":{"og:image":"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg","twitter:image":"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg"}},"integrations":{"ga4":{"measurementId":"G-CZ9Q9NBZB3"},"posthog":{"apiKey":"phc_EmzSy2RU0TOPhpouazMzxFedNdMyhze8HakyjffW2Wr","apiHost":"https://us.i.posthog.com"}},"contextual":{"options":["chatgpt","claude","perplexity","mcp","cursor","vscode","copy","view"],"display":"header"},"styling":{"latex":true},"navigation":{"global":{"anchors":[{"anchor":"API quickstart","icon":"forward-fast","href":"/get-started/quick-start"},{"anchor":"API pricing","icon":"credit-card","href":"/billing/overview"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/JX5rgsZaJp"},{"anchor":"Status","icon":"wave-pulse","href":"https://status.magichour.ai"}]},"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"magichour","hasAudioNarration":false,"actualSubdomain":"magichour","customDomains":["docs.magichour.ai"],"gitSource":{"type":"github","owner":"magichourhq","repo":"docs","deployBranch":"main","contentDirectory":"","isPrivate":false,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6adbbc5245c9cef2594f7f5c","collectionId":"9864976e-4af3-42e5-9703-3e0a1ac99863","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6adbbc5245c9cef2594f7f5c"},"feedback":{"thumbs":true,"issues":true,"edits":true},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6adbc5df914abd2327aaac0b","clientVersion":"0.0.3952","searchFilterCounts":[{"language":"default","tag":"Documentation","count":70},{"language":"default","tag":"API Reference","count":42},{"language":"default","tag":"Tools","count":30},{"language":"default","tag":"Integration","count":29},{"language":"default","tag":"Image Projects","count":16},{"language":"default","tag":"Images","count":15},{"language":"default","tag":"Video Projects","count":14},{"language":"default","tag":"Video","count":12},{"language":"default","tag":"Webhook Reference","count":10},{"language":"default","tag":"Get Started","count":7}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-updated-9-15","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[{"filePath":"style.css","content":"#sidebar,#table-of-contents-content{scrollbar-width:thin;scrollbar-gutter:none;scrollbar-color:gray transparent}"}],"page":{"pagePath":"integration/webflow","slug":"/integration/webflow","pageMetadata":{"title":"Webflow extension","description":"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.","href":"/integration/webflow"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,li:`li`,ol:`ol`,p:`p`,strong:`strong`,..._provideComponents(),...props.components},{Card,Heading,Note,Warning}=_components;if(!Card)_missingMdxReference(`Card`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!Note)_missingMdxReference(`Note`,true);if(!Warning)_missingMdxReference(`Warning`,true);return _jsxs(_Fragment,{children:[_jsx(_components.p,{children:`Create an animated GIF from a short creative brief, preview it, and add it to your Webflow page. The extension uses Webflow’s native Assets and Image APIs; it does not add custom scripts to your published site.`}),`\n`,_jsx(Note,{children:_jsx(_components.p,{children:`Native Webflow Designer generation, recovery, resizing, and insertion have been validated.\nMarketplace submission remains pending.`})}),`\n`,_jsx(Card,{title:`Build and install`,icon:`code`,href:`https://github.com/magichourhq/docs/tree/main/examples/webflow`,children:_jsx(_components.p,{children:`Build the Designer Extension with the official Webflow CLI and follow the development-install\ninstructions.`})}),`\n`,_jsx(Heading,{level:`2`,id:`generate-and-add-a-gif`,children:`Generate and add a GIF`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:`Open the extension in the Webflow Designer and select an element after which to add the GIF.`}),`\n`,_jsxs(_components.li,{children:[`Enter your `,_jsx(_components.a,{href:`https://magichour.ai/developer`,children:`Magic Hour API key`}),` and a creative brief of up to 500 characters.`]}),`\n`,_jsxs(_components.li,{children:[`Review the external-processing and API-credit disclosure, agree, then choose `,_jsx(_components.strong,{children:`Generate GIF`}),`.`]}),`\n`,_jsxs(_components.li,{children:[`Preview the completed GIF. Choose `,_jsx(_components.strong,{children:`Add GIF to Webflow`}),` to upload it into Webflow Assets and insert a native Image after your selection. Existing content stays in place.`]}),`\n`]}),`\n`,_jsxs(_components.p,{children:[`The extension is free; generation uses your Magic Hour API credits. The AI GIF Generator currently charges 50 credits per generation. Check `,_jsx(_components.a,{href:`/billing/overview`,children:`API pricing`}),` for current plan and credit requirements.`]}),`\n`,_jsxs(_components.p,{children:[`Only your entered prompt is sent to Magic Hour. The extension does not scan or export site content. Your API key and prompt stay in the current extension’s memory; they are not written to browser or shared project storage. Generated media stays in the preview until you explicitly add it to Webflow. The key is never attached to Webflow asset-upload requests. See `,_jsx(_components.a,{href:`https://magichour.ai/privacy-policy`,children:`Magic Hour’s privacy policy`}),`.`]}),`\n`,_jsx(Warning,{children:_jsx(_components.p,{children:`Webflow assets are publicly accessible, including before the page is published. Add only content\nyou intend to make public. GIF files must fit Webflow’s 4 MB image-asset limit. Oversized\nanimations are resized locally before preview and upload, preserving frames, timing, and looping.\nThe original stays in Magic Hour; resizing does not submit another generation.`})}),`\n`,_jsx(Heading,{level:`2`,id:`resume-without-generating-again`,children:`Resume without generating again`}),`\n`,_jsxs(_components.p,{children:[`The accepted project ID appears before polling. `,_jsx(_components.strong,{children:`Stop waiting`}),` stops local waiting while the Magic Hour job continues. Keep the project ID: closing the extension clears its memory. Enter the same ID under `,_jsx(_components.strong,{children:`Resume an existing GIF`}),` to retrieve the existing job without another generation charge.`]}),`\n`,_jsx(_components.p,{children:`Paid generation requests are never automatically retried. If submission is interrupted before an ID is returned, check your Magic Hour account history before trying again. An upload or insertion error does not require a new generation. If an insertion response is lost, check the page before adding again to avoid a duplicate.`}),`\n`,_jsx(_components.p,{children:`The finished GIF is copied into Webflow storage when you add it. Your published asset does not depend on an expiring Magic Hour download URL. Native MP4 asset upload is not part of this extension.`}),`\n`,_jsxs(_components.p,{children:[`Need help? Contact `,_jsx(_components.a,{href:`mailto:support@magichour.ai`,children:`support@magichour.ai`}),`.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Webflow extension","description":"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.","href":"/integration/webflow"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"Generate and add a GIF","slug":"generate-and-add-a-gif","depth":2,"children":[]},{"title":"Resume without generating again","slug":"resume-without-generating-again","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"magichour","siteName":"Magic Hour API Docs","title":"Webflow extension - Magic Hour API Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-23T19:04:35.356Z","originalFileLocation":"integration/webflow.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"dark\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Webflow extension - Magic Hour API Docs\">\u003cmeta data-mint-head property=\"og:description\" content=\"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.magichour.ai/integration/webflow\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Webflow extension - Magic Hour API Docs\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/magichour/pV2W72GIHTaiOFzk/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Magic Hour API Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#3b82f6\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.magichour.ai/integration/webflow\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/integration/webflow.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.magichour.ai/#organization\",\"name\":\"Magic Hour API Docs\",\"url\":\"https://docs.magichour.ai\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/magichour/5sgGJpuuipkw5s5v/icons/logo-light.svg?fit=max\u0026auto=format\u0026n=5sgGJpuuipkw5s5v\u0026q=85\u0026s=1f167e30baf11927bc2e0932411e455b\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.magichour.ai#website\",\"name\":\"Magic Hour API Docs\",\"url\":\"https://docs.magichour.ai\",\"publisher\":{\"@id\":\"https://docs.magichour.ai/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.magichour.ai/integration/webflow#webpage\",\"url\":\"https://docs.magichour.ai/integration/webflow\",\"name\":\"Webflow extension\",\"description\":\"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\",\"dateModified\":\"2026-10-23T19:04:35.356Z\",\"isPartOf\":{\"@id\":\"https://docs.magichour.ai#website\"},\"breadcrumb\":{\"@id\":\"https://docs.magichour.ai/integration/webflow#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.magichour.ai/integration/webflow#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Integration\",\"item\":\"https://docs.magichour.ai/integration/overview\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Webflow extension\",\"item\":\"https://docs.magichour.ai/integration/webflow\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.magichour.ai/integration/webflow#article\",\"headline\":\"Webflow extension\",\"name\":\"Webflow extension\",\"description\":\"Generate an animated GIF with Magic Hour and add it to your Webflow site as a native image asset.\",\"url\":\"https://docs.magichour.ai/integration/webflow\",\"mainEntityOfPage\":{\"@id\":\"https://docs.magichour.ai/integration/webflow#webpage\"},\"image\":\"https://d28dkohlqf5vwj.cloudfront.net/open-graph/logo-social-noisy-spectrum.jpg\",\"dateModified\":\"2026-10-23T19:04:35.356Z\",\"publisher\":{\"@id\":\"https://docs.magichour.ai/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.magichour.ai#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Magic Hour API Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Magic Hour API Docs","nav":{"global":{"anchors":[{"anchor":"API quickstart","icon":"forward-fast","href":"/get-started/quick-start"},{"anchor":"API pricing","icon":"credit-card","href":"/billing/overview"},{"anchor":"Community","icon":"discord","href":"https://discord.com/invite/JX5rgsZaJp"},{"anchor":"Status","icon":"wave-pulse","href":"https://status.magichour.ai"}]},"tabs":[{"tab":"Documentation","pages":[{"group":"Get Started","pages":[{"title":"Magic Hour API Documentation","sidebarTitle":"Introduction","href":"/introduction"},{"title":"Magic Hour API Quickstart","sidebarTitle":"Quick Start","href":"/get-started/quick-start"},{"title":"Authentication","href":"/get-started/authentication"},{"title":"Magic Hour MCP","href":"/integration/model-context-protocol"},{"title":"API Cookbook - Google Colab","href":"/get-started/cookbook"},{"title":"Product Video and Lip-Sync Recipes","href":"/get-started/starter-recipes"},{"title":"Bulk Face Swap API: Safe Batch Processing","sidebarTitle":"Bulk Face Swap","href":"/get-started/bulk-face-swap"}]},{"group":"Integration","pages":[{"title":"Integration Overview","sidebarTitle":"Overview","href":"/integration/overview"},{"title":"Compare AI Media APIs on Your Workload","sidebarTitle":"Evaluate API Providers","href":"/integration/evaluating-media-apis"},{"title":"Choose a Commercial AI Media Workflow","sidebarTitle":"Choose a Workflow","href":"/integration/commercial-media-workflows"},{"title":"Evaluate Lip Sync for Agency and Localization Work","sidebarTitle":"Agency Lip-Sync Pilot","href":"/integration/agency-lip-sync"},{"title":"smolagents","href":"/integration/smolagents"},{"title":"Creating Your First Integration","sidebarTitle":"Creating Your First Integration","href":"/integration/first-integration"},{"title":"PydanticAI","href":"/integration/pydantic-ai"},{"title":"Vercel AI SDK","href":"/integration/vercel-ai-sdk"},{"title":"OpenAI Agents SDK","href":"/integration/openai-agents-sdk"},{"title":"Google ADK","href":"/integration/google-adk"},{"title":"Langflow","href":"/integration/langflow"},{"title":"Haystack","href":"/integration/haystack"},{"title":"Figma plugin","href":"/integration/figma"},{"title":"Framer plugin","href":"/integration/framer"},{"title":"Adobe Express add-on","href":"/integration/adobe-express"},{"title":"Canva app","description":"Animate an image with Magic Hour and insert the completed video into a Canva design.","href":"/integration/canva"},{"title":"Webflow extension","href":"/integration/webflow"},{"title":"Postman Collection","description":"Import ready-to-run Magic Hour API flows for generation, polling, uploads, and downloads.","href":"/integration/postman"},{"title":"Adding API to Your App","href":"/integration/adding-api-to-your-app"},{"title":"Handling Inputs and Outputs","sidebarTitle":"Inputs \u0026 Outputs","href":"/integration/inputs-and-outputs"},{"title":"LangChain and LangGraph","href":"/integration/langchain"},{"title":"Mastra","href":"/integration/mastra"},{"title":"Development and Testing","href":"/integration/development-and-testing"},{"group":"Webhook","pages":[{"title":"Webhook Quickstart","sidebarTitle":"Quick Start","href":"/integration/webhook/overview"},{"title":"Create a Webhook","href":"/integration/webhook/create-webhook"},{"title":"Securing Your Webhook Handler","sidebarTitle":"Securing Handler","href":"/integration/webhook/secure-handler"},{"title":"Production Webhook Handler","sidebarTitle":"Production Setup","href":"/integration/webhook/create-handler"},{"title":"Webhook Event Types","sidebarTitle":"Event Types","href":"/integration/webhook/event-types"}]},{"title":"Postman Collection","href":"/integration/postman"},{"title":"API Docs MCP","href":"/integration/api-docs-mcp"}]},{"group":"Billing","pages":[{"title":"Magic Hour API Pricing","sidebarTitle":"Pricing Overview","href":"/billing/overview"},{"title":"Subscription Pricing","href":"/billing/subscription-pricing"},{"title":"Usage-Based Billing","href":"/billing/usage-based-pricing"},{"title":"Resolution Limits","href":"/billing/resolution-limits"}]},{"group":"Tools","pages":[{"group":"Video","pages":[{"title":"Video Tools","href":"/tools/video-tools"},{"title":"Face Swap Video API","sidebarTitle":"Face Swap Video","href":"/tools/video/face-swap-video"},{"title":"AI Talking Photo API","sidebarTitle":"Talking Photo","href":"/tools/video/talking-photo"},{"title":"Text to Video API","sidebarTitle":"Text to Video","href":"/tools/video/text-to-video"},{"title":"Lip Sync API","sidebarTitle":"Lip Sync","href":"/tools/video/lip-sync"},{"title":"Character Replace API","sidebarTitle":"Character Replace","href":"/tools/video/character-replace"},{"title":"Video to Video API","sidebarTitle":"Video to Video","href":"/tools/video/video-to-video"},{"title":"AI Video Editor API","sidebarTitle":"AI Video Editor","href":"/tools/video/video-editor"},{"title":"Audio to Video API","sidebarTitle":"Audio to Video","href":"/tools/video/audio-to-video"},{"title":"Auto Subtitle Generator API","sidebarTitle":"Auto Subtitle","href":"/tools/video/auto-subtitle-generator"},{"title":"Image to Video API","sidebarTitle":"Image to Video","href":"/tools/video/image-to-video"},{"title":"Animation API","sidebarTitle":"Animation","href":"/tools/video/animation"}]},{"group":"Images","pages":[{"title":"Image Tools","href":"/tools/image-tools"},{"title":"AI Image Editor API","sidebarTitle":"Image Editor","href":"/tools/image/image-editor"},{"title":"Face Swap Photo API","sidebarTitle":"Face Swap Photo","href":"/tools/image/face-swap-photo"},{"title":"AI Image Upscaler API","sidebarTitle":"Image Upscaler","href":"/tools/image/image-upscaler"},{"title":"AI Image Generator API","sidebarTitle":"Image Generator","href":"/tools/image/image-generator"},{"title":"Head Swap API","sidebarTitle":"Head Swap","href":"/tools/image/head-swap"},{"title":"AI Clothes Changer API","sidebarTitle":"Clothes Changer","href":"/tools/image/clothes-changer"},{"title":"Image Background Remover API","sidebarTitle":"Background Remover","href":"/tools/image/background-remover"},{"title":"Body Swap API","sidebarTitle":"Body Swap","href":"/tools/image/body-swap"},{"title":"AI Headshot Generator API","sidebarTitle":"Headshot Generator","href":"/tools/image/headshot-generator"},{"title":"AI Face Editor API","sidebarTitle":"Face Editor","href":"/tools/image/face-editor"},{"title":"Photo Colorizer API","sidebarTitle":"Photo Colorizer","href":"/tools/image/photo-colorizer"},{"title":"AI GIF Generator API","sidebarTitle":"GIF Generator API","href":"/tools/image/gif-generator"},{"title":"AI Meme Generator API","sidebarTitle":"Meme Generator","href":"/tools/image/meme-generator"},{"title":"AI QR Code Generator API","sidebarTitle":"QR Code Generator","href":"/tools/image/qr-code-generator"}]},{"group":"Audio","pages":[{"title":"Audio Tools","href":"/tools/audio-tools"},{"title":"AI Voice Cloner API","sidebarTitle":"Voice Cloner","href":"/tools/audio/voice-cloner"},{"title":"AI Voice Generator API","sidebarTitle":"Voice Generator","href":"/tools/audio/voice-generator"}]}]}]},{"tab":"API Reference","pages":[{"title":"API Reference","href":"/api-reference/overview"}]},{"tab":"Webhook Reference","pages":[{"title":"Webhook Reference","href":"/webhook-reference/overview"}]},{"tab":"Changelog","pages":[{"title":"Changelog","href":"/changelog"}]}]},"title":"Webflow extension - Magic Hour API Docs","buildId":"dpl_7GUK3ixdQTF3BSNUQYJm8ibGxQWw","deploymentId":"dpl_7GUK3ixdQTF3BSNUQYJm8ibGxQWw","dynamics":[],"chunks":[]}