How to Use PageFly Click Action?

Overview

In this article, you will learn how to direct a click action to a link, a section, an email address and/or a phone number. This element is for the customers to quickly access the other links, sections, send an email or make a phone call to you without leaving the page.

Customize your pages with PageFly for Free here.

Requirements

• Identify Clickable Elements: Identify the elements on your page (such as buttons, icons, or blocks) that you want to make clickable and direct to specific actions.
• Destination URLs or Sections: Prepare the URLs of external links or identify the internal sections of the page you want to scroll to.

How To Use PageFly Click Action

This video tutorial will give you more visualize about setting up Click Action:

Step 1: Identify Clickable Elements

Identify which elements you want to apply click actions to. These can include a button, an icon or a block. Check the breadcrumbs to make sure you have the correct element.

Step 2: Assign Actions To The Elements

There are 5 actions you can assign to each element. However, if the element is an image, there’s an additional action: Open lightbox. Below are detailed instructions for each type of action:

1. Direct To Another Link

• Step 1: After choosing the element, go to the General tab > Action > Click Action > Choose “Go to URL” from the dropdown menu.

• Step 2: Click “Select URL” > Paste your URL in the box and enable “Open in new tab” if needed.

Alternatively, if you want to link to any collections, products, pages, or blog posts in your store, select from the dropdown menu and choose the specific one you want to link to.

In the example below, you can link the selected element to a product by selecting “Link to Products”, select desired product, then click “Select”. The URL will then be updated accordingly.

• Step 3: Hit “Select” to apply the link.

2. Open Pop-Up Content

This click action helps you to open a pop-up content window of a Youtube video or other store content (such as a collection, a product, a blog post).

• Step 1: Select the element, go to the General tab > Action > Click Action > Choose “Open Pop-up” from the dropdown menu.
• Step 2: Customize Pop-up width and height (optional).
• Step 3: Choose the Pop-up content in the drop-down menu, such as Youtube Video or Store Content then insert the URL and modify other settings to the respective content.

3. Direct To The Internal Section Of The Page

Step 1: Name The Section

If you want to direct the element to an internal section of the page, you need to name the section first.

All your sections in the page editor are automatically named as ‘Section’, so in order to choose the right section, it is suggested to change the name of each section to categorize it clearly.

You can change your section name is by using the ATTRIBUTES setting:

Step 2: Direct To An Internal Section Of The Page

1. Select the element, go to the General tab > Action > Click Action > Choose “Scroll to section” from the dropdown menu.
2. Choose the section in the Scroll to section drop-down box.
3. (Optional) Set “Top Offset”: Spacing between the top screen edge of the browser and the destination section

This video will give you a better demonstration of how to link an element to a specific section of an existing page:

This is how Top Offset works on page:

4. Link To An Email Address

• Step 1: Select the element, go to the General tab > Action > Click Action > Choose “Send Email” from the dropdown menu. Then, select “Compose Email”

• Step 2: Insert the email details (including email address, email subject, email content).
• Step 3: Click “Done” to apply the changes

5. Link To A Phone Number

• Step 1: Select the element, go to the General tab > Action > Click Action > Choose “Call Number” from the dropdown menu.

• Step 2: Enter the phone number in the box.

6. Open LightBox (For Image Elements Only)

Specially customized for Image element, you have one more choice for image Click Action, which is Lightbox. This action allows users to click on an image and see a full-size image pop-up from the original.

• Step 1: Select the image element, then go to the General tab > Action > Click Action > Choose “Open lightbox”

• Step 2: Click Save & Publish. Then check the result on your Live page.

Use Cases

1. Service-Based Businesses: Provide quick access to appointment scheduling, inquiry forms, or resource downloads to streamline customer interactions.
2. Event Websites: Enable attendees to effortlessly register for events, explore agendas, or contact organizers for inquiries.
3. Upload a PDF file: You can upload a PDF file to a button for customers to download it. Check this article for more details.

Frequently Asked Questions

1. Is it possible to add additional interactive features to clickable elements?

Yes, you can enhance the interactivity of clickable elements by incorporating hover effects, animations, or tooltips to provide additional context or visual cues to users.

2. Can I customize the appearance of clickable elements?

Yes, you can customize the appearance of buttons, icons, or blocks to match your website’s design aesthetics.

Additional Resources

• How to create a section with image and text
• Upload Files to PageFly Page to Improve Contents Performance
• How to Name A Section in PageFly