Adding Email, Phone, and SMS Links in Framer

Setting it up so that clicking an email address or phone number opens it directly on a website makes it much easier for users to contact you. In Framer, you can simply add these links in just a few steps by following this guide.

Creating Email Links

1. Select the element to which you want to add the link.

2. Click the + icon next to Link in the properties panel on the right.

3. Enter the format mailto:emailaddress in the Link To field and press Enter.

Creating Phone Number Links

1. Select the element to which you want to add the link.

2. Click the + icon next to Link in the properties panel on the right.

3. Enter the format tel:phonenumber in the Link To field and press Enter.

Creating SMS Links

1. Select the element to which you want to add the link.

2. Click the + icon next to Link in the properties panel on the right.

3. Enter the format sms:phonenumber in the Link To field and press Enter.

Note: Email/phone/SMS links may not work properly in Preview mode. To ensure accuracy, test on a live site after you Publish.

Frequently Asked Questions (FAQ)

Q. Can links be applied to images or buttons?

• Yes. The Link property in Framer can be applied to all layers, including text (Frame, Image, Button, etc.).

Q. Why don't they work correctly in Preview mode?

• Because Preview is not an actual browser environment. Actions connecting to mail/phone apps must be tested on real devices after publishing.

Q. Can the clickable link styles (underline, color, etc.) be customized?

• Yes. Since Framer applies styles directly to the text layer, default styles are not enforced. You have full freedom to customize color/hover effects/animations the same way as default text.

This article is an adaptation and translation of ‘How do I add clickable email & phone number links’ from the official Framer blog.