Setting Button, Text, and Image Actions

In this article, you will learn how to set actions on buttons, text, and images. This will allow you to receive information from your customers, show-specific sections, add shortcodes, and etc.

Prior to getting started, you will need to have the following:

• An Existing Funnel

Setting Button, Text, and Image Actions

Setting an action on your funnel page using buttons, text, and images will allow your customers to submit information, open or close pop-ups, and scroll to a specific section, row, or element. They will also be able to accept or reject OTO offers, as well as log out of your Membership Area, among other things.

In order to set a button, text, and image action you need to add a shortcode. A shortcode is an abbreviated code that you can insert in the Page Editor to create actions on your page without using a programming language. In other words, it is a tag that calls a script to run whether you put it in a button, text, or image. Shortcodes work like HTML tags, with the difference that instead of using the lesser and greater than symbols (<>), they usually begin with a hashtag (#).

Available Shortcodes

This is a list of the shortcodes you can use in ClickFunnels.

General Codes

#submit-form - Used on any page a form is being submitted. This will submit the form and send visitors to the next step in the funnel. Please note, an email field is always required for form submissions in ClickFunnels.

#open-popup - Used on any page to open the popup on that page. Please note, you will need to set up the popup on your page for this to work properly. 

#close-popup - Used on any page to close the popup. You will need to place this somewhere within your popup for visitors to use it properly. 

#scroll-title - This requires you to review the title of a section, row, or element on your ClickFunnels page. 

1. You can find the title by clicking the gear icon of the section, row, or element you wish to scroll to, and then click on the hashtag icon to access the CSS Info.

2. After clicking on the hashtag icon, you will access the CSS Info, where you can view the title. You would then insert the code as #scroll-title and replace title with the title of the section, row, or element. It is recommended that you copy and paste the title to ensure it is exact.

tel:+1234567890 - Used on any page to create a click-to-call button, text, or image. You would replace the numbers in this method with the phone number you wish to have members call.

mailto:email@domain.com - Used on any page to create an email button, text, or image. You would replace email@domain.com in this example with the email address you wish to use.

Order Form and OTO Pages Only Codes

#yes-link - Used on OTO pages to add the OTO product to a visitor's order. This will also submit the page, sending the visitor to the next step in the funnel.

#no-link - Used on OTO pages to skip the OTO product offer. If there is a downsell page next in the funnel, it will send the visitor to that page. Otherwise, they will land on the next step in the funnel.

#yes-link-multi-(product id) Used on OTO pages to add a specific OTO product to a visitor's order when multiple are available. This will also submit the page, sending the visitor to the next step in the funnel. To find the Product ID, Open the product editor for the product and locate the number in the Page URL after the product/. 

Membership Area Code

/members/sign_out - Used to log a member out of a Membership Area.

 Setting Up Actions

Adding a shortcode to a Button

1. Hover over the button element and click on the gear icon to access the button settings.

2. Click on the Set Action button.

3. Choose the Go To Website URL option and add the code in the empty field.

Adding a Shortcode to a Text

This option will allow you to use all of the available shortcodes in ClickFunnels.

1. Click on the text element and highlight the text you want to add the shortcode to.

2. Click on the link icon.

3. Paste the code in the Link URL field.

Adding a Shortcode to an Image

This option will allow you to use all of the available shortcodes in ClickFunnels, with the exception of the #scroll-title shortcode. If you want to use an image to scroll, you can use the CSS ID Selector, instead of the shortcode.

1. Hover over the image element and click on the gear icon to access the image settings.

2. Paste the shortcode in the Link URL field.

You can also select a shortcode after clicking in the Link URL field.

After making any changes on your page, please don’t forget to click on the Save button.

 If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.