> ## Documentation Index
> Fetch the complete documentation index at: https://help.clinikehr.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Brand your portal

> Set your portal's name, web address, welcome message, logo, banner, favicon, colours and font so it looks like your practice.

export const StillStuck = ({topic}) => <div className="ck-callout ck-callout--note" role="note">
    <p className="ck-callout__body">
      <strong>Still stuck{topic ? ` with ${topic}` : ''}?</strong>{' '}
      Check <a href="/platform/help/troubleshooting">Troubleshooting</a> first —
      it covers the failures we see most often. If that does not resolve it,{' '}
      <a href="/platform/help/contact-support">contact support</a> and include
      your workspace name and the time the problem happened, so we can find the
      matching entry in your audit log.
    </p>
  </div>;

export const TaskHeader = ({before, time, after}) => <div className="ck-task">
    {before ? <div className="ck-task__cell">
        <div className="ck-task__title">Before you start</div>
        <p className="ck-task__body">{before}</p>
      </div> : null}

    {time ? <div className="ck-task__cell">
        <div className="ck-task__title">Takes about</div>
        <p className="ck-task__body">{time}</p>
      </div> : null}

    {after ? <div className="ck-task__cell">
        <div className="ck-task__title">When you're done</div>
        <p className="ck-task__body">{after}</p>
      </div> : null}
  </div>;

export const Path = ({steps = []}) => <span className="ck-path">
    {steps.map((s, i) => <span key={i} className="ck-path__step">
        {i > 0 ? <span className="ck-path__sep" aria-hidden="true">
            ›
          </span> : null}
        {s}
      </span>)}
  </span>;

export const Availability = ({editions = ['all'], plans, roles, note}) => {
  const list = editions.includes('all') ? ['clinic', 'pharmacy', 'lims'] : editions;
  return <div className="ck-avail" role="note" aria-label="Feature availability">
      <span className="ck-avail__label">Available in</span>

      {list.map(e => <span key={e} className={`ck-pill ck-pill--${e}`}>
          {EDITION_LABELS[e] || e}
        </span>)}

      {plans ? <span className="ck-avail__label">Plan</span> : null}
      {plans ? <span className="ck-pill ck-pill--plan">{plans}</span> : null}

      {roles ? <span className="ck-avail__label">Who</span> : null}
      {roles ? <span className="ck-pill ck-pill--role">{roles}</span> : null}

      {note ? <span className="ck-avail__note">{note}</span> : null}
    </div>;
};

<Availability editions={['all']} plans="Starter and above" roles="Owner" />

The **Branding** tab decides what patients see the moment they arrive: your name, your logo, your colours, and the web address you print on a card. It also holds the two fields that must be filled in before any portal setting can be saved at all.

<Path steps={['Settings', 'Client portal', 'Client Portal', 'Branding']} />

<TaskHeader before="Your logo and a banner image, and an owner account" time="About ten minutes" after="A portal that looks like your practice, at an address you can hand out" />

## Set it up

<Steps>
  <Step title="Name the portal">
    **Portal Name** is the title patients see — for example "Sunrise Health Portal". Typing it generates a **URL Slug** for you.
  </Step>

  <Step title="Settle the URL Slug before you publish">
    The slug is the last part of your web address: `client.clinikehr.com/` followed by your slug. It is checked live for length (at least three characters), reserved words, offensive words, and whether another practice already has it. A slug that fails blocks **Save**.

    Choose something short, obvious and easy to read out on the phone — `sunrise-health` rather than `sunrise-health-portal-2026`.
  </Step>

  <Step title="Write a welcome message">
    **Welcome Message** appears on the portal's front page. Two sentences is plenty: who you are, and what they can do here. Include your phone number and say plainly that the portal is not for emergencies.
  </Step>

  <Step title="Upload your images">
    Add a **Logo**, a **Banner Image** and a **Favicon** (the small icon on a browser tab). Sizes and limits are in the table below this procedure.

    **Logo** and **Banner Image** each have a show/hide toggle, so you can keep an image on file but leave it off the page, and a **Remove** button to delete it outright.

    A logo on a transparent background looks best. Keep any text in the banner away from the edges — it is cropped differently on a phone.
  </Step>

  <Step title="Choose colours and a font">
    Set your primary, secondary and accent colours, then a **Font Family**.

    Your primary colour carries the buttons patients need to find — **Sign In**, **Book**, **Sign Now** — so pick something with real contrast against white. A pale brand colour on white is unreadable for anyone with weak eyesight, which is a large share of the people using this portal.
  </Step>

  <Step title="Save">
    Select **Save**. Then check the result on the live portal using the open button next to the address chip at the top of the settings card.
  </Step>
</Steps>

## Image sizes and limits

| Image        | Best size  | Limits                              |
| ------------ | ---------- | ----------------------------------- |
| Logo         | Square     | Up to 5 MB — JPEG, PNG, WebP or GIF |
| Banner Image | 1920 × 480 | Up to 5 MB — JPEG, PNG, WebP or GIF |
| Favicon      | 32 × 32    | Up to 5 MB — JPEG, PNG, WebP or GIF |

<Warning>
  **Changing the URL Slug changes your web address and breaks every link you have already sent** — old emails, printed cards, the link on your website. Settle it before you publish and leave it alone afterwards. If you must change it, tell patients first and update anywhere you have published the old one.
</Warning>

## Your address, and the one thing it cannot be

Your portal is always at `client.clinikehr.com/` followed by your slug. Use the copy button on the address chip to grab it exactly.

**The portal does not support a custom domain.** There is no setting for it, and none is coming through these screens. Custom domains do exist elsewhere in ClinikEHR — booking pages, your store, memberships, contact forms and agents can all run on a domain of your own — which is exactly why people go hunting for the portal one. It is not there.

So publish the `client.clinikehr.com` address as it is: link it from your website's "Patient Portal" button, put it in your email signature and in your appointment confirmations, and print it on your cards.

## Check it worked

Open your portal address in a private browser window, as a patient would:

* Your **Portal Name** is the page title and the browser tab shows your favicon.
* Your logo and banner appear where you expect, at a sensible size on both a computer and a phone.
* The **Sign In**, **Existing Patient** and **New Patient** buttons stand out clearly against the background.
* Your welcome message reads well on a narrow screen.

Check it on a phone as well as a laptop. Most patients arrive on a phone.

## If something goes wrong

<AccordionGroup>
  <Accordion title="Save is greyed out">
    **Portal Name** and **URL Slug** must both be filled in, and the slug must pass its check. Until then the card at the top says "Set a URL slug in Branding to publish your portal", and settings on the other six tabs cannot be saved either.
  </Accordion>

  <Accordion title="My slug is rejected">
    Slugs must be at least three characters, cannot use reserved or offensive words, and must be unique across every practice. If yours is taken, add your town or a short qualifier — `sunrise-health-leeds`.
  </Accordion>

  <Accordion title="An image will not upload">
    Files must be under 5 MB and in JPEG, PNG, WebP or GIF format. A photo straight from a phone camera is often over the limit — resize it, or export it at a smaller size. PDFs and SVGs are not accepted.
  </Accordion>

  <Accordion title="My banner looks cropped or stretched">
    Supply it at 1920 × 480. Anything much squarer is cropped to fit, and phones crop it further. Keep faces and words in the middle.
  </Accordion>

  <Accordion title="I uploaded a logo but patients cannot see it">
    Check the show/hide toggle next to **Logo** is on, and that you saved. The toggle keeps the file on record while leaving it off the page, which is easy to leave switched off by accident.
  </Accordion>

  <Accordion title="Everything is read-only for me">
    Only the practice owner can edit portal settings. See [Roles and permissions](/platform/team/roles).
  </Accordion>
</AccordionGroup>

## Next

<Columns cols={2}>
  <Card title="Choose what patients can see and do" icon="https://mintcdn.com/clinikehr/nLyvBRumcl1Yk8z3/images/icons/sliders.svg?fit=max&auto=format&n=nLyvBRumcl1Yk8z3&q=85&s=beb6145918f561fc91f4eaa0aa591390" href="/portal/setup/features" width="24" height="24" data-path="images/icons/sliders.svg">
    All seven settings tabs, one by one.
  </Card>

  <Card title="Give a patient portal access" icon="https://mintcdn.com/clinikehr/nLyvBRumcl1Yk8z3/images/icons/user-check.svg?fit=max&auto=format&n=nLyvBRumcl1Yk8z3&q=85&s=98fa42f392a22265b263f2ea5710cbc0" href="/portal/setup/invite-patients" width="24" height="24" data-path="images/icons/user-check.svg">
    The three ways a person gets in.
  </Card>
</Columns>

<StillStuck />