Layout & Design

Linking to emails and phone numbers in Framer

Linking to emails and phone numbers in Framer

Linking to emails and phone numbers in Framer

Joseph

·

2:08

·

7.3K views

·

About this lesson

Make your contact details interactive by turning emails and phone numbers into instant actions in Framer. In this video, we’ll show you how to create clickable links that open a visitor’s email app, start a call, or even compose a text — all with simple mailto, tel, and sms prefixes.

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Absolutely no one likes having to copy0:02and [music] paste an email address or0:04manually type a phone number that they0:06find on your contact page. When things0:08get the slightest bit inconvenient,0:10people [music] bail or at the very least0:13quietly resent you. So, let's take a0:16look at how easy it is to turn those0:17emails and phone numbers into clickable0:20links in Framer so visitors [music] can0:22quickly email, call, or text you0:24directly from your site. [music]0:29First, we got to select the element that0:32we want to make clickable. Text, a0:34button, icon, whatever you want. With0:37this text selected, we can already see0:39the link section with the link to field0:41ready to go. It does say page or URL,0:45but there are actually special link0:47formats that a visitor's phone, tablet,0:49or computer will know exactly what to do0:52with. The format to link to an email0:54address starts with mail to colon0:58followed by the email address. When a1:00visitor clicks it, their default email1:02app opens with a new message already1:04addressed to the right place. For phone1:06numbers, instead we use teel1:10colon followed by a plus sign, the1:13country code, and then the rest of the1:15phone number. So in this case we'd have1:17teel colon +1555559876543.1:23On mobile and even some desktop1:25operating systems this becomes a one-tap1:28call. And if you want to send a text1:30message instead you can just change the1:32prefix to SMS colon and clicking the1:36link will compose a text message1:37instead. Just know that these links1:39might not work in preview mode. So you1:41may need to publish your site to test1:43them in a proper browser. And there you1:45have it. Now you can add email, phone,1:48and text links anywhere on your site1:51with just a few simple prefixes. That's1:54it for this one. I'll see you in the1:55next one.1:59[music]
Also coversLinks

Watch on YouTube ↗

‹ Framer Update: Squircle

Welcome to Design Pages in Framer ›

More in this topic

8 Framer shortcuts you're probably sleeping on4:19
8 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
Framer Update: Stack Sorting and Bento Grids2:16
Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
Sharing Vector Sets Across Projects (Vectors Lesson 7)3:41
Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)3:38
Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago
Animating Vectors in Framer (Vectors Lesson 5)4:25
Animating Vectors in Framer (Vectors Lesson 5)
Layout & Design4K views · 3 months ago
Customizing Vectors with Variables in Framer (Vectors Lesson 4)4:59
Customizing Vectors with Variables in Framer (Vectors Lesson 4)
Layout & Design3K views · 3 months ago
Replace component instances site-wide in Framer1:39
Replace component instances site-wide in Framer
Layout & Design4K views · 4 months ago
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)6:58
Creating and Organizing Vector Sets in Framer (Vectors Lesson 3)
Layout & Design3K views · 4 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.