search

codeCode Injection

hashtag
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 <head> area).

hashtag
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

hashtag
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.

triangle-exclamation

Ensure you are adding the script in Site header

Paste the script in Site header and click Save

Here’s a copy/paste-ready version with placeholders:

Why Site Header (not Footer)?

Ghost places Site Header code inside <head>, while Site Footer code is injected before </body>. For Travio, the goal is to define window.TRAVIO_CONFIG before the theme JS reads it.

hashtag
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).

  8. Paste the Content API key value for the variable contentApiKey window.TRAVIO_CONFIG = { contentApiKey: "123dsfd456sffeg9w87gdv4sg432s1v", ... }

  9. Click Save button.

circle-check

Content API keys are safe to use in the browser because they only allow read-only access to public content.

circle-exclamation

Your Admin API key is different and must never be placed in client-side code. (Travio doesn’t need Admin API for normal use.)

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.

PreviousUpload routes.yaml fileNextCode Injection Variables

Last updated