Website Settings API

The sdk.website namespace lets you read and update global website settings. These settings apply as defaults across all pages unless overridden at the page level.

Reading settings

getSettings()

Returns the current website settings.

const settings = sdk.website.getSettings();
console.log(settings.name);
console.log(settings.description);
console.log(settings.languageCode);

Returns:

name — string — Website name
description — string — Website description (used for SEO)
languageCode — string — Language code (e.g., en, fr, ja)
defaultTheme — string — Default theme: light, dark, or system
customCodeHead — string — Custom code injected into the head on all pages
customCodeBody — string — Custom code injected before the closing body tag on all pages

Updating settings

updateSettings(updates)

Merges updates into the website settings. Only pass the fields you want to change.

// Set site metadata
sdk.website.updateSettings({
  name: 'My Portfolio',
  description: 'A showcase of my design work',
});
 
// Set language
sdk.website.updateSettings({
  languageCode: 'en',
});
 
// Set theme
sdk.website.updateSettings({
  defaultTheme: 'dark',
});
 
// Inject global analytics code
sdk.website.updateSettings({
  customCodeHead: '<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXX"></script>',
});
 
// Inject global body scripts
sdk.website.updateSettings({
  customCodeBody: '<script src="https://cdn.example.com/widget.js"></script>',
});

Website vs page settings

Website settings are global defaults. Pages can override some of these with their own values:

SEO title — Website: name / Page: seoTitle
Description — Website: description / Page: metaDescription
Custom head code — Website: customCodeHead / Page: headerCode
Custom body code — Website: customCodeBody / Page: bodyCode
Language — Website: languageCode / Page level not available
Theme — Website: defaultTheme / Page level not available

When a page has its own seoTitle, it takes priority over the website name. When a page has headerCode, it's injected in addition to the website's customCodeHead.

Example: SEO setup plugin

A plugin that sets up global SEO and custom code:

export default definePlugin({
  name: 'SEO Setup',
  description: 'Configure global SEO and tracking',
  controls: {
    siteName: { type: 'text', label: 'Site Name', default: '' },
    siteDescription: { type: 'text', label: 'Description', default: '' },
    language: {
      type: 'select',
      label: 'Language',
      default: 'en',
      options: [
        { label: 'English', value: 'en' },
        { label: 'French', value: 'fr' },
        { label: 'Spanish', value: 'es' },
        { label: 'German', value: 'de' },
      ],
    },
    theme: {
      type: 'select',
      label: 'Default Theme',
      default: 'light',
      options: [
        { label: 'Light', value: 'light' },
        { label: 'Dark', value: 'dark' },
        { label: 'System', value: 'system' },
      ],
    },
  },
  run(values, sdk) {
    sdk.website.updateSettings({
      name: values.siteName || undefined,
      description: values.siteDescription || undefined,
      languageCode: values.language,
      defaultTheme: values.theme as 'light' | 'dark' | 'system',
    });
  },
});