# Footer & Call To Action

## Footer & Call To Action

**Files:** `src/content/homepage/english/*.md` (`footerLayout`), `src/i18n/en.json`, `src/config/menu.en.json`, `src/config/social.json`, `src/config/config.toml`, `src/content/sections/english/call-to-action.md` · **Skill level:** Beginner

Taskly ships four footers. Each page picks one with `footerLayout` in its frontmatter; a page without it gets `default`. A call-to-action card sits on the top edge of every footer, half over the page and half over the footer.

### The Four Footers
| `footerLayout` | Background | Where the demo uses it | What it shows |
| -------------- | ---------- | ---------------------- | ------------- |
| `default`      | Ink        | Every inner page       | Logo, description, and social icons; up to three link columns; the newsletter form; the AI row; the copyright, status, and language row |
| `wordmark`     | Ink        | `/`                    | The description as a large statement with the newsletter form beside the link columns; the AI row; the copyright, status, socials, and languages; then your site name in lilac across the full width |
| `newsletter`   | Cream      | `/home-2/`             | A white signup card first; the logo, description, and socials; one ruled row per link group (label on the left, links in a line); the AI row; the copyright, status, and languages |
| `tiles`        | White      | `/home-3/`             | A grid of cards: the brand card (logo, description, socials, status), the newsletter card in lilac, one soft pastel card per link group, and an ink card with the latest changelog release; then the AI row, the copyright, and the languages |

<div class="border border-dark">
  ![Wordmark footer on the first homepage](/images/taskly/footer-wordmark.jpg)
</div>

<div class="border border-dark">
  ![Newsletter footer on Home 2](/images/taskly/footer-newsletter.jpg)
</div>

<div class="border border-dark">
  ![Tiles footer on Home 3](/images/taskly/footer-tiles.jpg)
</div>

All four read the same data: the link columns from the menu files, the description, copyright, and newsletter text from the i18n files, the socials from `social.json`, the status from the status page. Changing one of them changes every footer.

### Pick A Footer For A Page
Add `footerLayout` to the frontmatter of the page's content file, in both languages:

```yaml
# src/content/homepage/english/home-2.md (and french/home-2.md)
footerLayout: "newsletter" # default | wordmark | newsletter | tiles
```

Any page with a content file takes the field, for example `src/content/pricing/english/-index.md` or `src/content/about-us/english/-index.md`. In collections with a schema, `npm run astro-check` reports a value that isn't one of the four; anywhere else, an unknown value falls back to `default`.

There is no site-wide setting. To use another footer everywhere, set `footerLayout` in each page's file, or change the `"default"` fallback in `src/layouts/components/global/Footer.astro` (a code change). The four layouts live in `src/layouts/components/global/footer/` (`FooterDefault.astro`, `FooterWordmark.astro`, `FooterNewsletter.astro`, `FooterTiles.astro`).

Things to know:

- **`wordmark`** prints `logoText` from `config.toml` (or the site `title` when `logoText` is empty), sized to fill the width. It shows no logo image. A long name gets small: check it at phone width.
- **`tiles`** links to the newest entry of the changelog (`src/content/changelog/`). With no entries, the release card is left out.
- The shared footer parts (`FooterSocials`, `FooterLanguages`, `FooterAi`) take `tone: "dark"` on the ink footers and `tone: "light"` on the cream and white ones. You only need this when you build your own footer.

### The Call To Action
The card above the footer appears on every page and reads `src/content/sections/english/call-to-action.md` (and `french/`):

```yaml
enable: true
tag: { label: "Get started", color: "white" }
title: "Bring your team into *sync* <br /> this week"
description: "..."
button: { enable: true, label: "Start for free", url: "/signup/", variant: "dark" }
secondaryButton: { enable: true, label: "Book a demo", url: "/request-demo/", variant: "fill-white" }
```

A page changes it, or hides it, with a `ctaSection:` block in its own file:

```yaml
ctaSection:
  title: "Talk to our team"   # this page only
```

```yaml
ctaSection:
  enable: false               # no call to action on this page
```

The status page ships with the card hidden this way. When the card is hidden, the footer moves up.

### Footer Logo
The `default` footer shows the same logo as the header on ink, with `logoText` in white. The built-in mark reads on the dark background as it is. A custom `logo` image is shown unchanged, so if yours is dark, set a light version for that footer in `config.toml`:

```toml
[site]
  logo     = "/images/my-logo.svg"
  logoDark = "/images/my-logo-white.svg"   # dark footer only; empty uses `logo`
```

The `newsletter` and `tiles` footers are light and show the regular `logo`. The `wordmark` footer shows your site name as text instead of a logo. See [Site Identity & Logo](/taskly/customization/site-identity-logo/#use-your-own-logo).

### Description And Copyright
Both are interface text in `src/i18n/en.json` (and `fr.json`):

```json
"footer": {
  "description": "Plan projects, share updates, and keep your remote team moving together.",
  "copyright": "© {year} {brand}. All rights reserved.",
  "newsletterTitle": "Ideas for calmer teamwork, by email",
  "newsletterDescription": "Product news and practical tips for remote teams, sent to your inbox."
}
```

`{year}` becomes the year of the build and `{brand}` your `[site] title`. With one language, you can type the text in `config.toml` instead (`footerDescription`, `[settings.copyright] text`). `[settings.copyright] enable = false` removes the line.

### Link Columns
The `footer` part of the menu files. See [Menus](/taskly/customization/menus/#footer-columns). The `default` footer has room for three columns; `newsletter` shows one row and `tiles` one card per group, so they take more.

### Social Icons
`src/config/social.json`:

```json
{
  "main": [
    { "enable": true, "label": "linkedin", "icon": "/images/icons/linkedin.svg", "url": "https://www.linkedin.com/company/acme" }
  ]
}
```

Set your profile URLs, set `"enable": false` on the networks you don't use, and add your own icon files to `src/assets/images/icons/`.

### Newsletter Form
The form posts to Mailchimp through `[settings.subscription] formAction`. `[settings.subscription] enable = false` removes it from the footer and from every other page. See [Forms](/taskly/customization/forms/).

### AI Row
Links that let visitors ask ChatGPT, Claude, Perplexity, or Grok about the current page, and open the AI-readable files. Turn the row off with `[settings.pageActions] footer = false`. See [SEO & AI Visibility](/taskly/customization/seo-ai-visibility/).

### Status Link
The bottom row shows a colored dot and the overall state from the status page ("All systems operational"). It is computed from the components in `src/content/sections/english/status-section.md`, so it changes when you change their `status`. It disappears when the status page is a draft (`draft: true` in `src/content/status/english/-index.md`) or the status section is disabled. See [Collections](/taskly/customization/collections/#status-page).

### Language Links
One link per language, shown while `[settings.multilingual] enable = true`. See [Internationalization](/taskly/customization/internationalization/).

### Do It With AI
```text
Update the footer: description "[TEXT]" and copyright "© {year} {brand}. [TEXT]" in src/i18n/en.json
and fr.json (translate for French). Use footerLayout "[default | wordmark | newsletter | tiles]" on
[PAGES]: set it in the frontmatter of each page's content file, in english/ and french/. Set my social links in src/config/social.json: [LINKS], and
disable the others. Change the call to action in src/content/sections/english/call-to-action.md
and french/ to "[TITLE]" with a button to [URL].
```