> ## Documentation Index
> Fetch the complete documentation index at: https://dhiwisepvtltd-5e04e6a4.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Custom code
> Add custom scripts, third-party embeds, analytics snippets, or bespoke components to your Rocket.new app by pasting code straight into chat.
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
> [!WARNING]
>
> 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](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/apis.md) page.
## What's next?
> **[Connectors](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/connectors/overview.md)**
>
> Some tools have dedicated integrations that are simpler than pasting raw code.
> **[Connect APIs](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/editor/apis.md)**
>
> Import and integrate API endpoints directly into your app.
> **[Compliance & privacy](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/polish/compliance.md)**
>
> Scripts you add may be subject to cookie consent rules.
> **[Launch your site](https://dhiwisepvtltd-5e04e6a4.mintlify.site/build/launch-web/launch-your-site.md)**
>
> Publish your site with all custom code included.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.