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

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:

# 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/):

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:

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

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:

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

Description And Copyright

Both are interface text in src/i18n/en.json (and fr.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. 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:

{
  "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.

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.

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.

Language Links

One link per language, shown while [settings.multilingual] enable = true. See Internationalization.

Do It With AI

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