> ## 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.
# Custom code
> Inject any code into your Rocket.new app through chat - scripts, embeds, widgets, and custom components.
export const LlmsDirective = () =>
For the complete documentation index, see llms.txt.
For a lightweight markdown version of this page, append .md to the URL.
;
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.
```plaintext wrap theme={null}
Add this to the bottom of every page:
```
**Describe what you want:**
If you do not have code yet, just describe the outcome. Rocket writes or fetches the integration for you.
```plaintext wrap theme={null}
Add a Calendly booking widget to my contact page.
```
```plaintext wrap theme={null}
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](https://21st.dev), shadcn/ui, Flowbite):**
```plaintext wrap theme={null}
Add this animated card component from 21st.dev to my features section:
...
```
```plaintext wrap theme={null}
Install shadcn/ui and use the Combobox component on my search page.
```
**Carousels, sliders, and interactive widgets:**
```plaintext wrap theme={null}
Add a testimonial slider using Swiper.js to my homepage. Auto-scroll every 4 seconds.
```
```plaintext wrap theme={null}
Add a lightbox gallery using GLightbox to the portfolio page.
```
**Custom widgets and overlays:**
```plaintext wrap theme={null}
Add a floating feedback button in the bottom-right corner. It should open a modal with a text input and a submit button.
```
```plaintext wrap theme={null}
Add a sticky announcement banner at the top of every page with a dismiss button. Save the dismissed state in localStorage.
```
```plaintext wrap theme={null}
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:**
```plaintext wrap theme={null}
Add a 3D product viewer to my homepage using . Use this .glb file URL: https://...
```
```plaintext wrap theme={null}
Embed this Sketchfab 3D model on my product page:
```
**Three.js and WebGL scenes:**
```plaintext wrap theme={null}
Add an animated Three.js particle background to my hero section. Dark theme, subtle movement.
```
```plaintext wrap theme={null}
Add a rotating 3D logo to the about page using Three.js.
```
**Spline:**
```plaintext wrap theme={null}
Embed this Spline scene as a full-width background on my landing page:
```
## Embeds
Paste an embed code from any tool and tell Rocket where to place it.
**Forms and surveys:**
```plaintext wrap theme={null}
Add this Typeform embed to my contact page:
```
```plaintext wrap theme={null}
Embed my Tally form as a popup triggered when someone clicks "Request a demo".
```
**Scheduling:**
```plaintext wrap theme={null}
Add this Calendly inline widget to my services page:
```
**Video:**
```plaintext wrap theme={null}
Embed this Loom video in the onboarding section:
```
```plaintext wrap theme={null}
Add a YouTube video to the hero. Autoplay muted, no controls, looped.
```
**Maps:**
```plaintext wrap theme={null}
Embed a Google Maps iframe on the contact page showing our office location.
```
```plaintext wrap theme={null}
Add a Mapbox interactive map to the locations page.
```
**Social and community:**
```plaintext wrap theme={null}
Embed my latest tweets on the homepage sidebar using the Twitter timeline widget.
```
```plaintext wrap theme={null}
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:**
```plaintext wrap theme={null}
Add Google Analytics 4 to every page:
```
```plaintext wrap theme={null}
Add Mixpanel and track a page view event on every route change.
```
**Tag managers:**
```plaintext wrap theme={null}
Add Google Tag Manager to the head of every page. Here is the snippet:
```
**Pixels and retargeting:**
```plaintext wrap theme={null}
Add the Meta Pixel and fire a PageView on every page load:
```
```plaintext wrap theme={null}
Add the LinkedIn Insight Tag to all pages.
```
**Session recording:**
```plaintext wrap theme={null}
Add Hotjar to my site. Only load it on public pages, not inside the dashboard.
```
**Live chat and support:**
```plaintext wrap theme={null}
Add this Intercom widget. Only show it when a user is logged in.
```
```plaintext wrap theme={null}
Add the Crisp chat widget to every page. Set the widget color to #FF5C00.
```
## Styles, fonts, and animations
**Custom CSS:**
```plaintext wrap theme={null}
Add this CSS override to change the heading font across the whole site:
h1, h2, h3 { font-family: 'Cabinet Grotesk', sans-serif; }
```
```plaintext wrap theme={null}
Add a custom scrollbar style that matches my dark theme.
```
**Fonts:**
```plaintext wrap theme={null}
Add this Google Fonts import and apply Outfit as the default body font:
```
```plaintext wrap theme={null}
Add a self-hosted variable font from my /fonts folder and apply it to headings.
```
**Icon libraries:**
```plaintext wrap theme={null}
Add Font Awesome and use the rocket icon in the navbar.
```
**Animation:**
```plaintext wrap theme={null}
Add GSAP and use it to fade in the hero section on page load with a slight upward movement.
```
```plaintext wrap theme={null}
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.
```plaintext wrap theme={null}
Add this conversion pixel only to my thank-you page, not the rest of the site.
```
```plaintext wrap theme={null}
Load this charting library only on the dashboard.
```
```plaintext wrap theme={null}
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.
| Location | When it is used | Examples |
| :------------------- | :------------------------------------------- | :--------------------------------------------------- |
| **``** | Code that must load before the page renders | Font imports, meta tags, tracking pixels |
| **``** | Visible components and embeds | Form widgets, 3D viewers, UI components |
| **Before ``** | Code that should load after content | Analytics scripts, chat widgets |
| **Inline** | Code scoped to a specific element or section | Custom 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](/build/editor/apis) page.
## What's next?
Some tools have dedicated integrations that are simpler than pasting raw code.
Import and integrate API endpoints directly into your app.
Scripts you add may be subject to cookie consent rules.
Publish your site with all custom code included.