Custom Code Injection | Rocket.new Build

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.

Location	When it is used	Examples
`<head>`	Code that must load before the page renders	Font imports, meta tags, tracking pixels
`<body>`	Visible components and embeds	Form widgets, 3D viewers, UI components
Before `</body>`	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 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.

​How it works

​UI components and libraries

​3D and immersive content

​Embeds

​Scripts and tracking

​Styles, fonts, and animations

​Targeting specific pages

​Where code gets placed

​What is not supported

​What’s next?