# Header button

The buttons at the top right of every page, and where they send people.

Source: https://docs.lookoutridgeit.com/plugins/header-button/

Every website has a button at the top right of every page. It says **Get A
Quote** unless you change it. This screen sets the wording, and it sets where
the button sends people.

You can add a second button beside it, too. "Call us" or "See the menu" are
good uses.

Every style shows these buttons. How they look depends on your style. See
[Appearance](https://docs.lookoutridgeit.com/plugins/appearance/) to see or change your style.

## Where to find it

This one has no menu item of its own.

1. Go to **Admin**, then **Plugins**.
2. Find the row named `header-cta`.
3. Click the gear icon at the end of that row.

The heading reads "header-cta Settings". The [Plugins](https://docs.lookoutridgeit.com/admin/plugins/) page
explains the rest of that screen.

**Warning**
There is no **Publish** step here. You click **Save Settings**, and the change
is on your live website right away. Every visitor sees it.

## The main button

| Box | What it does |
| --- | --- |
| **Show header button** | On shows the button. Off hides it at every screen width. Nothing else in the header moves. |
| **Button text** | The wording on the button. Blank means **Get A Quote**. |
| **Button action** | What happens on click. Pick **Go to a page or website**, **Open a new email**, or **Start a phone call**. |
| **Destination** | Where the click goes. What belongs here depends on **Button action**. |

All the boxes are always on screen. **Destination** does not change to match
your choice, so read the next part before you type in it.

## Three ways to set it up

Northwind Heating is the made-up business in these examples.

### Send people to your quote page

1. Set **Button action** to **Go to a page or website**.
2. Type `/quotes` in **Destination**.
3. Click **Save Settings**.

This is how your website arrived. A path that starts with a slash is a page on
your own site. A full web address works too, like `https://example.com/book`.
An address like that opens in a new tab. Type a bare name like `example.com`
and your website adds the rest for you.

### Start a phone call

1. Set **Button text** to `Call Us`.
2. Set **Button action** to **Start a phone call**.
3. Type `555-0199` in **Destination**.
4. Click **Save Settings**.

On a phone, the button starts the call. On a computer it opens the app that
handles calls. In some styles, a call button shows only its phone icon on a
phone screen.

### Open a new email

1. Set **Button text** to `Email Us`.
2. Set **Button action** to **Open a new email**.
3. Type `hello@northwind-heating.example` in **Destination**.
4. Click **Save Settings**.

The button opens a new blank email to that address.

## A second button

The second button sits beside the main one. It is quieter, so the main button
still stands out. It starts off.

| Box | What it does |
| --- | --- |
| **Show a second button** | Turns the second button on. |
| **Second button text** | The wording on it, such as "Call us". |
| **Second button action** | The same three choices as the main button. |
| **Second button destination** | Where it goes, in the same form as the main **Destination**. |

The second button needs all of it. With the switch on but no text or no
destination, it does not show. It never borrows the main button's words.

To add one:

1. Turn on **Show a second button**.
2. Type `Call us` in **Second button text**.
3. Set **Second button action** to **Start a phone call**.
4. Type `555-0199` in **Second button destination**.
5. Click **Save Settings**.

**Show header button** only turns off the main button. To hide the second one,
turn off **Show a second button**.

The Trades style can also show these buttons in its footer. See
[Footer](https://docs.lookoutridgeit.com/plugins/footer/).

**Tip**
Look at your own website after you save. Click **View Site** at the top right,
then click each button. It should do what you just set up.

## A button is missing

Three things can cause that.

**The switch is off.** Open the settings again and check **Show header
button**, or **Show a second button**.

**The destination cannot work.** A phone box with an email address in it, or a
web address with a typo, draws no button at all. Your website would rather show
nothing than show a button that goes nowhere. There is no error message, so a
missing button is the only sign. Fix the destination and save again.

**The second button is half filled in.** It needs both its text and its
destination.