# CTA

Call to action (CTA) buttons and links are an essential part of your sales funnel. They act like guideposts on the sales journey and provide users will clear directions. **Buy Now**, **Sign Up**, and **Submit** are three common CTA examples.

Funnelish has two types of CTA widgets: **Button** and **Link**.&#x20;

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F3iFyvhwl0lc3UTVQSJvd%2F2025-09-18%20at%2019.12.png?alt=media&#x26;token=5721160c-4e2c-46cd-9e4b-83f959de06eb" alt=""><figcaption></figcaption></figure>

## **Adding CTA buttons**

Guide users to your conversion goal with a CTA button.

1. Drag the **Button** widget to the step.
2. Click the widget one time to open the side panel.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FQqpeOeZTPhOtWqTSopaq%2F2025-09-18%20at%2019.13.png?alt=media&#x26;token=3d115e86-62b2-423f-8d27-e216434558a2" alt=""><figcaption></figcaption></figure>

3\. Customize the design and label.

4\. Click Save changes.

5\. Preview.

6\. Revise.

7\. Click Save changes.

### Customizing the CTA button&#x20;

Go to the side panel to customize the design and appearance of your CTA button. Click the **Basic** and **Advanced** menu tabs and you'll find all the standard tools here (e.g. alignment, margins, background color).

Pay close attention to the following tools that can greatly affect conversion rates: **Text within the button,** and **Click action**.

By clicking inside the button you can customize the text and emojis.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F8OG4x9uFH3wukP9FpqP3%2Fimage.png?alt=media&#x26;token=b0745720-b983-4d07-8c9f-25ac83bd78d4" alt=""><figcaption></figcaption></figure>

*Click action*

To add a link to a button (or text), click the button element, then click the **Interaction** tab in the side panel. Then click **On Click** to assign the action. You can select:

* **Submit step**  Submit customer payment details and move the user to the next step in the flow.
* **Go to next step**  Move the customer along the flow but do not submit any payment information.
* **Go to URL**  Add a link to an external page.
* **Go to section/row**  Create an anchor link to a different place on the same step. Link to a specific section or row on the step.
* **Show popup**  Choose a popup for the drop-down menu. When a user clicks the image, the popup displays.&#x20;

You can also assign an action when the mouse is placed over the button or when leaving.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FlSmREgmfDoDdsX3hlqFo%2Fimage.png?alt=media&#x26;token=177e60c9-43b1-4c75-b354-c7f427805069" alt=""><figcaption></figcaption></figure>

*Styling text*

Under the **Style** tab you can edit button's appearance. While still having the button clicked, scroll down the settings panel. Here you can customize the alignment, layout, font, background color, line spacing and letter spacing and shadows.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F26ycfcSTEJcoK0EdPPyV%2Fimage.png?alt=media&#x26;token=f0c21dd8-4fbc-4543-9254-014e90e06754" alt=""><figcaption></figcaption></figure>

*Hover state*

Use this optional feature to change the button's appearance when the user mouse hovers the shape. Click on **Hover** to open the settings and style the background color, change the button text appearance and add shadows.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F6S4AuGgPAxVaS572P2nB%2Fimage.png?alt=media&#x26;token=3411a8fa-0298-4d9a-8377-eb5d610c0335" alt=""><figcaption></figcaption></figure>

## **Adding links**

A link is a standalone piece of text with an active hyperlink. It works like a button, but it does not have a shape (e.g. oval). Common examples of CTA links include: **Trouble logging in?**, **Forgot your password**, and **Join now**.

1. Drag the **Link widget** to the step.
2. Click the widget one time to open the side panel.

![Default Link widget](https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FSczXS2ehtpTkQEut2ZT9%2Fa-6a.png?alt=media\&token=58d1402b-67f4-47bf-a2e1-3dae310639bd)

3\. Customise the text and design.

4\. Click Save changes.

5\. Preview.

6\. Revise.

7\. Click Save changes.

### Customizing the link&#x20;

Go to the side panel to customize the link text and design. Click the **Style** tab, and you'll find all the standard tools here (e.g. alignment, margins, background color).

*Link text*

Enter a word or phrase into the **Link text** field to create a custom message for your users.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2F5xIxNUADBaYCqiTkFefi%2F2025-09-18%20at%2019.36.png?alt=media&#x26;token=95bf1411-1609-4476-88f7-7f6ec97409fc" alt=""><figcaption></figcaption></figure>

Then click on the **Interaction** tab to set up the url for the link.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FiPqgjO5PoUKXVuXjL4Ko%2Fimage.png?alt=media&#x26;token=f1f3fbe1-d5e2-426b-9d0c-f1a6d61b55c5" alt=""><figcaption></figcaption></figure>

*Hover and Clicked state*

Use this optional feature to change the text's appearance when the user mouse hovers the link or when clicked. Style the text, change the hover color, and add text shadow.

<figure><img src="https://2613769297-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1AQCa9ckIWH7hGfrUV%2Fuploads%2FhGorzazQ75e1HXxVkGP3%2Fimage.png?alt=media&#x26;token=15838bc1-dd2a-4a73-a1db-2fbff0957cae" alt=""><figcaption></figcaption></figure>
