Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.rocket.new/llms.txt

Use this file to discover all available pages before exploring further.

If it runs in a browser, Rocket can add it to your task. Paste a snippet directly into chat or describe what you want. Rocket figures out where it goes and integrates it into the right file. The examples below are a starting point. Any standard HTML, CSS, JavaScript, or iframe embed works.

​
How it works

You have two options: paste code you already have, or describe what you want. Paste a snippet: Copy any embed code, script tag, or component from anywhere and paste it into chat with a short instruction. 
Add this to the bottom of every page:
<script>window.$crisp=[];window.CRISP_WEBSITE_ID="xxxx";(function(){...})()</script>
Describe what you want: If you do not have code yet, just describe the outcome. Rocket writes or fetches the integration for you. 
Add a Calendly booking widget to my contact page.

Add an interactive 3D product model to my hero section using Three.js.

​
UI components and libraries

Bring in any component library, design system, or individual UI snippet. Copy-paste components (e.g. 21st.dev, shadcn/ui, Flowbite): 
Add this animated card component from 21st.dev to my features section:
<div class="card-wrapper">...</div>

Install shadcn/ui and use the Combobox component on my search page.
Carousels, sliders, and interactive widgets: 
Add a testimonial slider using Swiper.js to my homepage. Auto-scroll every 4 seconds.

Add a lightbox gallery using GLightbox to the portfolio page.
Custom widgets and overlays: 
Add a floating feedback button in the bottom-right corner. It should open a modal with a text input and a submit button.

Add a sticky announcement banner at the top of every page with a dismiss button. Save the dismissed state in localStorage.

Add a "Back to top" button that appears after the user scrolls down 400px.

​
3D and immersive content

Rocket can add 3D models, scenes, and interactive experiences to any page. Model viewers: 
Add a 3D product viewer to my homepage using <model-viewer>. Use this .glb file URL: https://...

Embed this Sketchfab 3D model on my product page:
<div class="sketchfab-embed-wrapper"><iframe ...></iframe></div>
Three.js and WebGL scenes: 
Add an animated Three.js particle background to my hero section. Dark theme, subtle movement.

Add a rotating 3D logo to the about page using Three.js.
Spline: 
Embed this Spline scene as a full-width background on my landing page:
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/..."></spline-viewer>

​
Embeds

Paste an embed code from any tool and tell Rocket where to place it. Forms and surveys: 
Add this Typeform embed to my contact page:
<div data-tf-live="abc123"></div><script src="//embed.typeform.com/next/embed.js"></script>

Embed my Tally form as a popup triggered when someone clicks "Request a demo".
Scheduling: 
Add this Calendly inline widget to my services page:
<div class="calendly-inline-widget" data-url="https://calendly.com/..."></div>
<script src="https://assets.calendly.com/assets/external/widget.js"></script>
Video: 
Embed this Loom video in the onboarding section:
<div><iframe src="https://www.loom.com/embed/..."></iframe></div>

Add a YouTube video to the hero. Autoplay muted, no controls, looped.
Maps: 
Embed a Google Maps iframe on the contact page showing our office location.

Add a Mapbox interactive map to the locations page.
Social and community: 
Embed my latest tweets on the homepage sidebar using the Twitter timeline widget.

Add a Discord invite widget to my community page.

​
Scripts and tracking

Paste a script tag into chat and Rocket places it in the correct location automatically. Analytics: 
Add Google Analytics 4 to every page:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>

Add Mixpanel and track a page view event on every route change.
Tag managers: 
Add Google Tag Manager to the head of every page. Here is the snippet: <!-- GTM -->
Pixels and retargeting: 
Add the Meta Pixel and fire a PageView on every page load:
<script>!function(f,b,e,v,...)...</script>

Add the LinkedIn Insight Tag to all pages.
Session recording: 
Add Hotjar to my site. Only load it on public pages, not inside the dashboard.
Live chat and support: 
Add this Intercom widget. Only show it when a user is logged in.

Add the Crisp chat widget to every page. Set the widget color to #FF5C00.

​
Styles, fonts, and animations

Custom CSS: 
Add this CSS override to change the heading font across the whole site:
h1, h2, h3 { font-family: 'Cabinet Grotesk', sans-serif; }

Add a custom scrollbar style that matches my dark theme.
Fonts: 
Add this Google Fonts import and apply Outfit as the default body font:
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600&display=swap" rel="stylesheet">

Add a self-hosted variable font from my /fonts folder and apply it to headings.
Icon libraries: 
Add Font Awesome and use the rocket icon in the navbar.
Animation: 
Add GSAP and use it to fade in the hero section on page load with a slight upward movement.

Add Lottie and play this animation JSON when the page loads: https://...

​
Targeting specific pages

Not everything should load everywhere. Tell Rocket exactly where to apply the code to keep your site fast. 
Add this conversion pixel only to my thank-you page, not the rest of the site.

Load this charting library only on the dashboard.

Add this exit-intent popup script to landing pages only.

​
Where code gets placed

Rocket determines the right location based on what the code does. You can always specify a different location.
LocationWhen it is usedExamples
<head>Code that must load before the page rendersFont imports, meta tags, tracking pixels
<body>Visible components and embedsForm widgets, 3D viewers, UI components
Before </body>Code that should load after contentAnalytics scripts, chat widgets
InlineCode scoped to a specific element or sectionCustom styles on a button, event listeners on a form

​
What is not supported

The following require dedicated backend setup and cannot be added through custom code:
  • Webhook endpoints
  • Server-side environment variables accessed outside of Rocket’s environment system
  • Custom server-side API routes
For backend functionality, see the APIs and databases page.

​
What’s next?

Connectors

Some tools have dedicated integrations that are simpler than pasting raw code.

Connect APIs

Import and integrate API endpoints directly into your app.

Compliance & privacy

Scripts you add may be subject to cookie consent rules.

Launch your site

Publish your site with all custom code included.