Whitelabeling? change the terms of service and privacy policy for selfhosted

[Novapixel1010]

I would like to be able to change the links for terms of service and privacy policy. That way there is no confuse brand wise. cal.com for example allows you to do this. But I would like to point out that Twenty does have good privacy policy

And it would be nice if my logo wasn't just this little tiny thing 😆

[SwiftPayments]

This would be great and also the ability to white label and edit the subject and content of the invite email.

[Novapixel1010]

This software is so close to beating lot of other options out their. This feature and having way to invoice clients could make this an easy choice for small to medium size business.

[Novapixel1010]

I have noticed that there has been limited progress on this, so I would like to contribute some additional input. I believe that the terms of service and privacy policy should be configured through the environment variables, as this can be self-hosted meaning twenty terms of service doesn't apply. While I am not entirely certain about the complete process, I would like to present the initial concept. First, modifications are required in the render.yaml file, followed by changes in the generate-front-config.ts file.

Here are my recommendations:

For render.yaml add this:

services:
  - type: web
    name: server
    # ... existing config ...
    envVars:
      - key: SERVER_URL
        fromService:
          name: server
          type: web
          envVarKey: RENDER_EXTERNAL_URL
      # ADD THIS:
      - key: TERM_SERVICE
        sync: false # or just omit sync if you manage it in the Dashboard
      - key: PRIVACY_POLICY
        sync: false

For generate-front-config.ts add this:

export function generateFrontConfig(): void {
  const configObject = {
    window: {
      _env_: {
        REACT_APP_SERVER_BASE_URL: process.env.SERVER_URL,
        // ADD THESE LINES:
        TERM_SERVICE: process.env.TERM_SERVICE,
        PRIVACY_POLICY: process.env.PRIVACY_POLICY,
      },
    },
  };
  // ... rest of function
}

For FooterNote.tsx add this:

export const FooterNote = () => {
  const isOnAWorkspace = useIsCurrentLocationOnAWorkspace();
  // ... existing hooks

  // Read from window._env_ with a fallback
  const termsUrl = (window as any)._env_?.TERM_SERVICE || 'https://twenty.com/legal/terms';
  const privacyUrl = (window as any)._env_?.PRIVACY_POLICY || 'https://twenty.com/legal/privacy';

  if (!isOnAWorkspace) {
    return (
      <StyledCopyContainer>
        <Trans>By using Twenty, you agree to the</Trans>{' '}
        <a
          href={termsUrl}
          target="_blank"
          rel="noopener noreferrer"
        >
          <Trans>Terms of Service</Trans>
        </a>{' '}
        <Trans>and</Trans>{' '}
        <a
          href={privacyUrl}
          target="_blank"
          rel="noopener noreferrer"
        >
          <Trans>Privacy Policy</Trans>
        </a>
        .
      </StyledCopyContainer>
    );
  }
  // ...
};

I am not sure what other code would need to be changed.