There are two different types of call-to-actions on RELAYTO: content-level and experience-level. In this guide, we will learn how to use both.
Adding a CTA to the Experience
Step 1
Click the "Settings" button in the top right corner.
![](https://cdn.relayto.com/images_originals/5QbSkYQ3RraBSfCUUKGA_Slide%2016_9%20-%20251%20(4).png)
Step 2
Click the "Call-to-action" button.
![](https://cdn.relayto.com/images_originals/RbAFYwfR7G7sttwJhJ8Q_ALEXBD.png)
Step 3
Click the "Add call-to-action" button. Note that if you already have a CTA, the button will show two different buttons: Edit and Delete.
![](https://cdn.relayto.com/images_originals/leIWRa54QOOEo2NgM8df_Slide 16_9 - 246 (12).png)
Adding a Content Level CTA
Step 1
Click the "Studio" button in the top right corner.
![](https://cdn.relayto.com/images_originals/GB2RSiETSHi6doLTW2lw_Slide%2016_9%20-%20251%20(34).png)
Step 2
Click the "Add Interactivity" icon on the toolbar at the top middle of the screen or in the Interactive Studio side menu.
π‘ Tips: To better understand How to Add a Call-to-Action Button, click here
![](https://cdn.relayto.com/images_originals/Vldi5rMQSOOP2bfsoUT7_Slide%2016_9%20-%20251%20(35).png)
Adding a CTA to the Navigation
Step 1
Click the "Settings" button in the top right corner.
![](https://cdn.relayto.com/images_originals/5QbSkYQ3RraBSfCUUKGA_Slide%2016_9%20-%20251%20(4).png)
Step 2
Click "Navigation."
![](https://cdn.relayto.com/images_originals/qklbooQJS3KnCnzKWlZg_Slide%2016_9%20-%20250.png)
Step 3
Click "Type" and choose "Top Bar Menu."
Generate or create bookmarks for navigation.
π‘Tips: To better understand How to add navigation to your content, click here.
![](https://cdn.relayto.com/images_originals/Pl8Ryle2Q4CTq5LGjPQ0_Slide%2016_9%20-%20250%20(1).png)
Step 4
Click the "plus" sign within the navigation at the top of the page.
![](https://cdn.relayto.com/images_originals/ZVPPjbz7RjycWK8uhdKK_Slide%2016_9%20-%20250%20(2).png)
Customizing a CTA
Type
You can choose between two CTA styles: icon and button. The selected style will be shown in the Button Preview.
![](https://cdn.relayto.com/images_originals/K6tF8AZvS3egCP5FJqD3_Slide 16_9 - 247 (1).png)
Click the "Choose Icon" button to choose an icon from our library or to upload one image.
![](https://cdn.relayto.com/images_originals/uFuMZ7eRDGqbic5Vx4yC_Slide 16_9 - 247 (2).png)
Tooltip text
Add text that will be displayed when hovering.
![](https://cdn.relayto.com/images_originals/v6EGu7ImQz2zrgl1cM9K_Slide 16_9 - 247 (3).png)
Background & Color
Change these to match your brand colors.
![](https://cdn.relayto.com/images_originals/UEhjzWwIQ4WZq6O2D9y6_Slide 16_9 - 247 (4).png)
Select action on click
Use this section to change or update the CTA's type.
![](https://cdn.relayto.com/images_originals/EkFqUJswR22WJFGE5Rpb_Slide 16_9 - 247 (5).png)
Animate it
The CTA plays the role of a guide. To avoid confusion and keep the user engaged, itβs important to retain one visual scheme. If you are using custom-uploaded images, you can add animations to suggest clickability and keep the viewers engaged in the content.
π‘Tips: To read a complete guide on Animations, click here.
![](https://cdn.relayto.com/images_originals/nY8jH5BjS1OHYIynI9yU_Slide%2016_9%20-%20250%20(35).png)
Add a pop-up
Call-to-actions can be used to include additional information & content without making your page denser. For example, you can place an icon showing a popup with text on hover or open an embed (i.e. YouTube video, image, article) on click.
π‘Tips: To understand How to Add and Edit Popups, click here.
![](https://cdn.relayto.com/images_originals/lDfGE0RKToeeCWNYpEmh_screenshot3-ezgif.com-video-to-gif-converter.gif)
Types of CTAs
You can choose from different types of actions.
Open widget: Select a widget to open a RELAYTO embed, integrations, or websites that support iframe.
π‘Tips: Explore the options in RELAYTO Integrations & Embeds in the RELAYTO Academy to find the most suitable one for your needs.
Open Image, Play Video, and Play Audio: These options are for files within their respective categories.
Go to page. Choose a page inside the experience. When the button is clicked, the screen will be redirected to the selected page.
Download file. Add images, videos, audio files, zip files, and other types of files to be downloaded. We recommend uploading files below 100MB.
π‘Tips: Click here to access RELAYTO Best Performance Guide.
Contact me. Add an email address. When the button is clicked, the person can type their message and contact information.
![](https://cdn.relayto.com/images_originals/2nYukYcyTMCfAfQAAcWk_Slide 16_9 - 246 (13).png)
Go to Link. Add a link and choose between three states: open in a new tab, open in the same tab, or open in a window popup.
![](https://cdn.relayto.com/images_originals/MYiNpdMJSSKDZSY1ljJC_Slide 16_9 - 260 (1).png)
Open post. Add and format text using our text editor.
![](https://cdn.relayto.com/images_originals/64MlQi1gRBq5YlnzPuJg_Slide 16_9 - 260 (2).png)
Related Articles:
π¨ How to customize your backgrounds
π How to embed widgets
Thank you for joining us in this tutorial! If you have any questions or need help, feel free to email us at support@relayto.com or book a call here.