Adding Dynamic Email and Phone Links to Your Wix Repeater

When building a dynamic website with Wix, you might want to display a list of items from a dataset and include specific actions like sending an email or making a phone call directly from your repeater. With Wix's Velo API, you can easily achieve this. In this blog post, we will walk through the process of adding dynamic email and phone links to your Wix repeater.

Setting Up Your Dataset and Repeater

Before diving into the code, ensure you have the following set up in your Wix Editor:

1. Dataset: Add a dataset to your page and connect it to your collection. For this example, let's name it dataset1.

2. Repeater: Add a repeater to display the items from your dataset. Inside the repeater, include two button elements: one for the email link and another for the phone link. Name these buttons emailButton and phoneButtonrespectively.

The Code

To dynamically set the email and phone links for each item in your repeater, you need to use the onItemReady function. This function is triggered for each item when the repeater is populated with data from the dataset.

Here’s the complete code to achieve this:

$w.onReady(function () {
    $w("#dataset1").onReady(function () {
        $w('#repeater1').onItemReady(($item, itemData, index) => {
            // Setting the email link
            if (itemData.email1) {
                $item('#emailButton').link = 'mailto:' + itemData.email1;
            }
            // Setting the phone link
            if (itemData.phone1) {
                $item('#phoneButton').link = 'tel:' + itemData.phone1;
            }
        });
    });
});

Let's break down what this code does:

1. $w.onReady: This function ensures that the code runs only after the entire page is fully loaded.
   

2. $w("#dataset1").onReady: This function ensures that the code inside it runs only after dataset1 is fully loaded and ready to be interacted with.
   

3. $w('#repeater1').onItemReady: This function is triggered for each item in the repeater. It provides three parameters:

• $item: The current item in the repeater.

• itemData: The data for the current item.

• index: The index of the current item.
  

1. Setting the Email Link:

• if (itemData.email1): This checks if the current item has an email1 field.

• $item('#emailButton').link = 'mailto:' + itemData.email1: This sets the link of the emailButton to a mailto link with the email address from the dataset.
  

1. Setting the Phone Link:

• if (itemData.phone1): This checks if the current item has a phone field.

• $item('#phoneButton').link = 'tel:' + itemData.phone1: This sets the link of the phoneButton to a tel link with the phone number from the dataset.
  

Benefits

Using this approach, you can dynamically generate email and phone links for each item in your repeater based on the data from your dataset. This can be incredibly useful for directories, contact lists, or any application where users need to contact individuals or businesses directly from your website.

Additional Tips

• Data Validation: Ensure your dataset contains valid email addresses and phone numbers to avoid broken links.

• Styling: Customize the emailButton and phoneButton to match your website’s design for a seamless user experience.

• Further Actions: Extend this example to include other dynamic actions, such as navigating to a website, by using similar logic and different data fields.

By leveraging the power of Wix’s Velo API, you can create interactive and dynamic web applications with ease. Adding features like dynamic email and phone links enhances user interaction and provides a more personalized experience on your site.

Need Help with Your Website Design?

If you need assistance with designing your website or implementing advanced features like the ones discussed in this post, WIXCreate is here to help! Our team of experts specializes in creating stunning and functional websites tailored to your specific needs. Whether you're starting from scratch or looking to enhance your existing site, we have the skills and experience to bring your vision to life.

Contact WIXCreate today to learn more about how we can help you create the perfect website for your business or personal project.

Happy coding!

Bonus!

Below is the code snippet adapted for a dynamic page:

$w.onReady(function () {
    // Ensure the dataset is ready before accessing its data
    $w("#dynamicDataset").onReady(function () {
        // Get the current item data from the dataset
        const itemData = $w("#dynamicDataset").getCurrentItem();

        // Set the email link if the email1 field is present
        if (itemData.email1) {
            $w('#emailButton').link = 'mailto:' + itemData.email1;
        } else {
            $w('#emailButton').collapse();
        }

        // Set the phone link if the phone field is present
        if (itemData.phone) {
            $w('#phoneButton').link = 'tel:' + itemData.phone1;
        } else {
            $w('#phoneButton').collapse();
        }
    });
});