> 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-variables.md).

# Code Injection Variables

Use this in **Ghost Admin** → **Settings** → **Code Injection** → **Site Header**.

{% hint style="info" %}
Refer the code injection snippet provided in [Code Injection](/travio/getting-started/code-injection.md).
{% endhint %}

### Header Logo Height

Variable: `--travio-logo-nav-height`

What it controls: Header logo height in the top navigation.

Where it applies: Nav logo in the header.

Effect of changing it: Larger/smaller brand mark in header across all pages.

How to use: Set a CSS length value (px, rem, etc).

Example: `--travio-logo-nav-height: 22px;`

<div data-with-frame="true"><figure><img src="/files/tqS6YfCJEuqtwmIb9HQn" alt=""><figcaption><p>Brand logo in header</p></figcaption></figure></div>

***

### CTA Logo Height

Variable: `--travio-logo-cta-height`

What it controls: Logo height in CTA-style logo placements used by the theme.

Where it applies: CTA/logo blocks that use the CTA logo variable.

Effect of changing it: Keeps CTA logo scale consistent with your brand system.

How to use: Same as above; set a CSS length value.

Example: `--travio-logo-cta-height: 22px;`

<div data-with-frame="true"><figure><img src="/files/cwndsMRz5M6mrFgFmZkW" alt=""><figcaption><p>Logo in CTA</p></figcaption></figure></div>

***

### Content API Key

Variable: `window.TRAVIO_CONFIG.contentApiKey`

What it controls: Ghost Content API access used by Travio’s dynamic features.

Where it is used in code: Advanced archive/article/video filtering + pagination via API. Footer tabbed post feeds (for example latest/featured/tag tabs). Some video/media preview fetching paths.

Effect of changing it: If valid key is present, filtering/footer API features work fully and efficiently. If missing/invalid, theme falls back where possible and may show diagnostic messages for advanced features.

How to use correctly: Use the Ghost Content API Key (public key), not Admin API key. Keep quotes around it as a string.

<div data-with-frame="true"><figure><img src="/files/Jkofn5Cym6lXsaBxZTX9" alt=""><figcaption><p>Content API key in Code Injection</p></figcaption></figure></div>

***

### Open External Links in New Tab

Variable: `window.TRAVIO_CONFIG.openLinksInNewTab`

What it controls: External-link behavior site-wide.

Where it is used in code: `handleExternalLinksInNewTab()` scans all links and updates only external http/https links.

Effect of true: External links open in new tab (`target="_blank"`). Security `rel` values are enforced (`noopener noreferrer`).

Effect of false: Theme does not auto-modify external links.

How to use: true for publication-style UX (keep readers on site). false if you want normal same-tab behavior.

***

### Footer Social Media Icons

Variable: `window.TRAVIO_CONFIG.footer.socialIcons`

What it controls: Custom SVG icons used for footer social links.

Where it is used in code: Footer builder resolves icon by social slug; your SVG overrides built-ins when key matches.

<div data-with-frame="true"><figure><img src="/files/6bhwMaYtPD7Sh6bXw64O" alt=""><figcaption><p>Social Media Icons in Footer</p></figcaption></figure></div>

Important setup requirement (this is critical): Icons are rendered only for social items found in Secondary Navigation. In Secondary Navigation, label must start with `*` followed by slug.

Use labels like: `*google`, `*behance`, `*dribbble` and set each item URL to your profile link. If you only define social icons in code injection but do not add matching \*slug links in Secondary Navigation, nothing will display.

How slug matching works: Your object key is the slug (`google`, `behance`, `dribbble`). Footer social nav item label (without `*`) must match that slug. If slug has no built-in icon and no custom SVG override, icon is not rendered.

<div data-with-frame="true"><figure><img src="/files/ph2fBFlIlmbvzJrhVk3x" alt=""><figcaption><p>Social media links in Secondary Navigation</p></figcaption></figure></div>

Adding missing icons: If icons for a social media is missing, you can copy the SVG from [Tabler Icons](https://tabler.io/icons) for that brand and add in code injection. Ensure that the key matches the label in secondary navigation, as shown in below image.

<div data-with-frame="true"><figure><img src="/files/ThtUNQbgI2YDec8M22g0" alt=""><figcaption><p>Social media SVGs for missing icons</p></figcaption></figure></div>

***

### Filters

Variable: `window.TRAVIO_CONFIG.filters.visibility`

What it controls: Which filter groups are shown on each listing template.

Where it is used in code: Filter visibility normalization + page-specific mapping. The config currently does this:

#### Filters on Articles page

Variable: `filters.visibility.articles`

destination: true, experiences: true

Effect: Articles page shows both destination and experience filters.

<div data-with-frame="true"><figure><img src="/files/mCDRh77eB91EY2Bu1Y0A" alt=""><figcaption><p>Filters in Articles page</p></figcaption></figure></div>

#### Filters on Videos page

Variable: `filters.visibility.videos`

destination: true, experiences: true

Effect: Videos page shows both destination and experience filters.

<div data-with-frame="true"><figure><img src="/files/P8l3OEWYfsJa316lT4b1" alt=""><figcaption><p>Filters in Videos page</p></figcaption></figure></div>

#### Filters on Archive page

Variable: `filters.visibility.archive`

destination: true, experiences: true, date: true

Effect: Archive page shows destination, experience, and date filters.

<div data-with-frame="true"><figure><img src="/files/tFRAnyvna94VmCF3JqM7" alt=""><figcaption><p>Filters in Archive page</p></figcaption></figure></div>

#### Filters on Author page

Variable: `filters.visibility.author`

destination: true, experiences: true

Effect: Author page shows both filter groups.

<div data-with-frame="true"><figure><img src="/files/0YITy70YlqQTm72RB96Y" alt=""><figcaption><p>Filters in Author page</p></figcaption></figure></div>

#### Filters on Tag Page

Variable: `filters.visibility.tag`

destination: true, experiences: true

Effect: Standard tag page shows both filter groups.

<div data-with-frame="true"><figure><img src="/files/DvqGAfafplJ9C6sRfhwZ" alt=""><figcaption><p>Filters in Tag page</p></figcaption></figure></div>

#### Filters on Destination tags

Variable: `filters.visibility.tagDestination`

destination: false, experiences: true

Effect: Destination-style tag layout hides destination filter (to avoid redundancy) and keeps experience filter.

<div data-with-frame="true"><figure><img src="/files/WymvoDvW4eWiPnkxTNC7" alt=""><figcaption><p>Filters in Destination tag page</p></figcaption></figure></div>

#### Filters on Experience tags

Variable: `filters.visibility.tagExperience`

destination: true, experiences: false

Effect: Experience-style tag layout hides experience filter and keeps destination filter.

<div data-with-frame="true"><figure><img src="/files/7CQMpRHtSMcKNVkAnHpB" alt=""><figcaption><p>Filters in Experience tag page</p></figcaption></figure></div>

#### How to use these safely:

* Use `true`/`false` booleans for each filter group.
* Supported keys include `destination`/`destinations`, `experience`/`experiences`, and `date`.
* If all groups are disabled for a page, the filter panel is hidden on that page.

***

### Secondary Navigation Example for Your Social Icons

In **Ghost Admin** → **Navigation** → **Secondary Navigation**, add entries like:

* Label: `*google` → URL: `https://...`
* Label: `*behance` → URL: `https://...`
* Label: `*dribbble` → URL: `https://...`

<div data-with-frame="true"><figure><img src="/files/iU0M1WLHrHAQWPQOXeEK" alt=""><figcaption><p>Social Media links in Footer</p></figcaption></figure></div>

That is what makes your injected SVGs actually appear in the footer.