How to uniformly display the website's contact information, phone number, and email address with the `contact` tag?

How to efficiently manage and unify the display of a company's contact information, such as contacts, phone numbers, email addresses, and addresses, is a seemingly simple problem that is often frustrating.Imagine if this information were scattered across various pages of a website, and once an update is needed, it has to be searched for and modified individually, which is not only time-consuming and labor-intensive but also prone to omissions or inconsistencies.contactLabels, it can help us easily achieve unified management and flexible display of contact information.

Backend settings for contact information: One-stop management

Make full use ofcontactLabel, we first need to make a unified configuration in the AnQi CMS backend.After logging into the backend, you will find a "Contact Settings" option under the "Backend Settings" menu.This is the central control console for all contact information on the website.

On the "Contact Settings" page, you can see some default options, such as:

  • Contact: This is usually the name of the representative you want the customer to contact.
  • Contact phone number: The main telephone number of the website.
  • Contact addressThe specific office or business address of the company.
  • Contact emailEmail address for business consultation or customer service.
  • WeChat IDandWeChat QR codeConvenient for customers to add WeChat contact.

When adding custom parameters, you need to set a "parameter name" and a "parameter value." The "parameter name" is an identifier for template calls, and it is recommended to use concise English words or camel case naming (for exampleWhatsApp/FaxNumberThis is clear when calling in the template.The parameter value is the content you want to display on the front end.In addition, you can also add a "note" for each custom parameter for future management and understanding of its purpose.By such centralized configuration on the back-end, regardless of how many pages on the website need to display contact information, all modifications only need to be made in one place, greatly improving operational efficiency and ensuring consistency of information.

Call in templatecontactLabel: Flexible display

Once the contact information is configured on the backend, we can use it in the website's frontend template, utilizingcontactLabel to retrieve and display it.contactThe usage of tags is intuitive and flexible, the basic syntax is: {% contact 变量名称 with name="字段名称" %}.

HerenameThe parameter is very critical, it corresponds to the field name you configure in the background "Contact Information Settings" (whether built-in or custom). If you choose not to set it变量名称,contactThe tag will directly output the value of this field. If the value is assigned to a variable, it can be referenced multiple times in the template or used flexibly in more complex HTML structures.

Here are some common application scenarios and code examples to help you understand how to flexibly use templatescontactTags:

  1. Display basic contact information uniformly at the footer of the website: Generally, the footer of a website contains the company name, address, phone number, and record information. We can unify these pieces of information:

    <div class="footer-contact">
    <p>联系人：{% contact with name="UserName" %}</p>
    <p>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
    <p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
    <p>地址：{% contact with name="Address" %}</p>
</div>

  2. Display more detailed information and QR code on the 'Contact Us' pageOn a dedicated "Contact Us" page, you may need more comprehensive information, including social media links and WeChat QR codes, etc:

    <div class="contact-page-info">
    <h1>联系我们</h1>
    <p>我们很乐意为您服务，请通过以下方式联系我们：</p>
    <ul>
        <li>联系人：{% contact with name="UserName" %}</li>
        <li>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></li>
        <li>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></li>
        <li>地址：{% contact with name="Address" %}</li>
        {% contact wechat with name="Wechat" %}
        {% if wechat %}
        <li>微信：{{ wechat }}</li>
        {% endif %}
        {% contact qrcode with name="Qrcode" %}
        {% if qrcode %}
        <li>微信扫码：<img src="{{ qrcode }}" alt="微信二维码" class="wechat-qrcode"></li>
        {% endif %}


        {# 调用自定义的WhatsApp字段 #}
        {% contact whatsapp with name="WhatsApp" %}
        {% if whatsapp %}
        <li>WhatsApp：<a href="https://wa.me/{{ whatsapp | replace:" ","" }}" target="_blank" rel="nofollow">{{ whatsapp }}</a></li>
        {% endif %}
    </ul>
</div>

    We used herereplace:" ",""The filter removed the spaces from the WhatsApp number to generate the correctwa.melink, which is an example of converting technical information into practical expressions.

  3. Display dynamic contact phone number on product detail page: If you want your product detail page to directly display a clickable contact phone number for easy one-click dialing, you can also use it.contact.

    {# 假设这是产品详情页的一个部分 #}
<div class="product-call-to-action">
    <p>对产品感兴趣？立即致电我们！</p>
    <a href="tel:{% contact with name="Cellphone" %}" class="btn-call-us" rel="nofollow">
        <i class="icon-phone"></i> 咨询电话：{% contact with name="Cellphone" %}
    </a>
</div>

By the above examples, you can seecontactHow tags can present the data configured in the background in various forms on the front page. For multi-site users,contactTags also supportsiteIdParameter, you can specify which site's contact information you want to retrieve, which is very useful when you need to call contact information across sites.

Unified management, improving efficiency and user experience

Utilizing AnQi CMS'scontactUnified label management of website contact information brings multifaceted value.

First, itAvoided repetitive work. You do not need to fill in the contact information separately on each page, just modify it once in the background, and all callscontactwill be automatically updated at the label location, greatly improving operational efficiency.

Secondly, itEnsured consistency of information.All contact information on the website comes from the same backend configuration, and the contact information that users see on any page is accurate and up-to-date, which helps to build user trust and enhance brand professionalism.

Again, for search engine optimization (SEO), having uniform and consistent contact information (especially the company name, address, and phone number, known as NAP information) helps search engines better understand your business entity, thereby potentially having a positive impact on local search rankings.

The way of centralized management alsosimplified the website maintenance. When the company's contact information changes, the operations personnel can quickly locate the "Contact Information Settings" on the backend to make changes, without touching any code or worrying about missing anything.

In summary, of Anqi CMS'scontactTags are not only a simple template call function, but also a practical tool that embodies the essence of content management system design, making the management of website contact information simpler and more efficient than ever.

Frequently Asked Questions (FAQ)

1. If I want to add some fields not included in the default contact information, such as the company's fax number or WhatsApp account, does AnQiCMS support it?

Of course, it is supported!The 'Contact Information Settings' page of AnQi CMS provides the 'Custom Setting Parameters' feature.FaxNumberorWhatsApp），and fill in the corresponding information in the parameter value. You can use it in the template{% contact with name="FaxNumber" %}or{% contact with name="WhatsApp" %}to call these custom fields.

**2. Update the contact information on the back-end after