How to add mail client and telephone client on links

 

This blog is about the mail client and telephone client that we sometimes have to add to links and also there is configuration which needs to be added to AEM to allow that thing to work.

You must have seen this type of references on sites where there are links, usually on CONTACT US page where we click and it redirects us to outlook/gmail where To: is having mail Id of that organization so how can we achieve that:

This is the sample code which can be used to make the above links to add mail and tel client:

<div class="text-cta">

    <a class="cmp-text-cta" href="mailto:someone@outlook.com" aria-                                                                                             label="${properties.siteLabel}">

        <span class="cmp-text-cta__font-icon"><i class="fas fa-tv"></i></span>

        <span class="cmp-text-cta__text">${properties.siteLabel}</span>

    </a>

</div>

<div class="text-cta">

   <a class="cmp-text-cta" href="tel:${agency.agencyModelBean.ilgPhone}" aria-label="${agency.agencyModelBean.ilgPhone}">

     <span class="cmp-text-cta__font-icon"><i class="fas fa-phone"></i></span>

     <span class="cmp-text-cta__text">${agency.agencyModelBean.ilgPhone}</span>

   </a>

</div>

 

AEM Configuration for linkchecker to allow these links to work:

 

Xml to create this file:

com.day.cq.rewriter.linkchecker.impl.LinkCheckerImpl.xml

 

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"

    jcr:primaryType="sling:OsgiConfig"

    scheduler.concurrent="{Boolean}false"

    scheduler.period="{Long}5"

    service.bad_link_tolerance_interval="{Long}48"

    service.cache_broken_internal_links="{Boolean}false"

    service.check_override_patterns="[^system/]"

    service.special_link_patterns="[]"

    service.special_link_prefix="[javascript:,data:,mailto:,#,&lt;!--,${,tel:]"/>