StudioKingbyNIRVANI Open the studio

Integrations

Put it on any site in one line

StudioKing ships as plain CSS or one script tag, so it works anywhere you can add code to the page head and a class to a section.

Get your line from the Kits view (one per client) or the brand kit (a starter set in any colour). The examples use acme.

Any HTML page

  1. Paste the line before </head>.
  2. Add a class to a section: .sk-hero, .sk-section, .sk-cta and the rest.
<script src="https://studioking.ai/api/client/acme.js?c=1f6a4e" defer></script>

<section class="sk-hero">
  <h1>Your headline</h1>
</section>

Next.js

  1. Load the line once in your root layout with next/script.
  2. Use the class names on your sections.
// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://studioking.ai/api/client/acme.js?c=1f6a4e" strategy="afterInteractive" />
      </body>
    </html>
  );
}

// any page
<section className="sk-hero">...</section>

React (Vite or any bundler)

  1. Add the line to index.html.
  2. Use className="sk-hero" on a section. The script also picks up sections your app renders later.
<!-- index.html -->
<script src="https://studioking.ai/api/client/acme.js?c=1f6a4e" defer></script>

WordPress

  1. Add the line to your site head with your theme's header settings or a header and footer code plugin.
  2. In the block editor, select a Group or Cover block, open Advanced, and type sk-hero in Additional CSS class(es).

Webflow

  1. Open Site settings, then Custom code, and paste the line into Head code. Custom code needs a paid site plan.
  2. Select a Section and add sk-hero as a class in the Selector field. Publish.

Shopify

  1. In Online Store, Themes, Edit code, open layout/theme.liquid and paste the line before </head>.
  2. Add a Custom Liquid section with a wrapper such as <div class="sk-hero">...</div>, or add the class in your theme's section markup.

Nirvani sites and funnels

  1. In Brand Studio, push the brand's custom values into its Nirvani account. They include StudioKing Script.
  2. Paste {{ custom_values.studioking_script }} into the site or funnel header code. Every page in that account then loads the client's backgrounds, and edits in StudioKing reach them on their own.
{{ custom_values.studioking_script }}

No JavaScript allowed

  1. Use the .css version of the same link. Live kits show their static stand-in.
<link rel="stylesheet" href="https://studioking.ai/api/client/acme.css?c=1f6a4e">

Prefer files?

Every background also exports as code you own: CSS, CSS vars, React, Astro, HTML, Tailwind, SVG tile, Tokens, Builder prompt, Hosted link, Live HTML, Live React, Hosted embed, Client stylesheet.