> For the complete documentation index, see [llms.txt](https://docs.themeupstudio.com/travio/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/travio/getting-started/code-injection.md). # Code Injection ### Code Injection (Site Header) Travio 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 %} **Why Site Header (not Footer)?** Ghost places Site Header code inside ``, while Site Footer code is injected before ``. For Travio, the goal is to define `window.TRAVIO_CONFIG` **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: Travio Theme. 4. Click **Add.** 5. After creation, a popup will appear. Copy these from the popup: * **Content API Key** → to be pasted into `contentApiKey` 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 `contentApiKey`\ `window.TRAVIO_CONFIG = {`\ `contentApiKey: "123dsfd456sffeg9w87gdv4sg432s1v",` \ `...`\ `}` 9. 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. (Travio 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 Travio 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

In the next section, we will look at the variables defined in Code injection and their purpose.