> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/crimson/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeupstudio.com/crimson/getting-started/code-injection.md). # Code Injection ### Code Injection (Site Header) space.vars.THEME\_NAME reads a few **global JavaScript variables** (Content API key + behavior flags) **before the theme scripts run**, so this snippet must go into **Ghost → Code Injection → Site Header** (the `` area). #### Step 1 — Open Code Injection in Ghost Admin 1. Log in to your Ghost Admin. 2. Go to **Settings → Advanced → Code Injection**.

Code injection module in Ghost Admin Setting

#### Step 2 — Paste the snippet into “Site Header” 1. Find the **Site Header** box (not Site Footer). Paste your snippet exactly as-is into **Site Header**. 2. Replace the example values with your own (details below). 3. Click **Save**. {% hint style="danger" %} Ensure you are adding the script in **Site header** {% endhint %}

Paste the script in Site header and click Save

Here’s a **copy/paste-ready** version with placeholders: {% code title="Code injection in Site header of your Ghost website. Copy and Paste this script as is then update the variable values as per your preferances." lineNumbers="true" %} ```html ``` {% endcode %} {% hint style="info" %} Site social links are no longer configured in Code Injection, except for WHATSAPP\_LINK. Crimson now reads site social accounts from Ghost Admin > Settings > General settings > Social accounts. {% endhint %} **Why Site Header (not Footer)?** Ghost places Site Header code inside ``, while Site Footer code is injected before ``. For space.vars.THEME\_NAME, the goal is to define `window.GLOBAL` **before** the theme JS reads it. #### Step 3 — Create a Custom Integration (to get the Content API key) Ghost’s official docs recommend generating your **Content API URL + key** by creating a **Custom Integration**. 1. In Ghost Admin, go to **Settings → Integrations**. 2. Click **Add custom integration**. 3. Name it something like: space.vars.THEME\_NAME Theme. 4. Click **Add.** 5. After creation, a popup will appear. Copy these from the popup: * **Content API Key** → to be pasted into `window.GHOST_CONTENT_API_KEY` * **API URL** (Optional)(or Content API URL details shown there) → use only if you need `window.GHOST_API_URL` 6. Click **Save** in the Custom integration popup. 7. Open Code Injection module ([explained earlier](#step-1-open-code-injection-in-ghost-admin)). 8. Paste the Content API key value for the variable `window.GHOST_CONTENT_API_KEY` 9. (Optional) Paste the API URL value for the variable `window.GHOST_API_URL` 10. Click **Save** button. {% hint style="success" %} **Content API** keys are **safe to use in the browser** because they only allow **read-only access to public content**. {% endhint %} {% hint style="warning" %} Your **Admin API key** is different and must never be placed in client-side code. (space.vars.THEME\_NAME doesn’t need Admin API for normal use.) {% endhint %} Below are the step-by-step snapshots for adding the Content API key (and API URL) in Code injection, so space.vars.THEME\_NAME can use it.

Navigate to Integrations module in Ghost Admin Setting and Click Add custom integration

Add the integration's name and click Add

Copy the Content API key (API URL is optional) and click Save

Paste the copied Content API Key in the Code injection script and click Save

#### Step 4 — When to set `window.GHOST_API_URL` Leave it **commented** unless one of these applies: * You are on **Ghost(Pro)** and your **API domain** differs from your public site domain. * You are using a **staging/canonical** setup where the theme runs on one domain but the API must be called on another. * You are doing a headless/front-end scenario. {% hint style="info" %} If you are unsure, add the API URL from custom integration to the `window.Ghost_API_URL` variable in Code injection. {% endhint %} In the next section, we will look at the variables defined in Code injection and their purpose.