How to dynamically retrieve and display the contact information of a website, such as phone number, email, and social media links, in a template?

The contact information of the website, such as phone, email, and social media links, is an important bridge for users to connect with us.In website operation, the accuracy and accessibility of this information are crucial.AnQiCMS as an efficient content management system, provides a very convenient way to manage and dynamically display these contact information, allowing us to easily maintain the uniformity of website content and quickly update it when needed.

This article will delve into how to set contact information in AnQiCMS, as well as how to dynamically retrieve and display them in a user-friendly manner in templates.

One, manage contact information in AnQiCMS backend

All website contact information is centrally managed on the AnQiCMS backend, which greatly simplifies the work of website operators.

  1. Access contact information settings:Log in to the AnQiCMS backend, click on the left menu item "Settings" -> "Contact Information Settings".

  2. Fill in the predefined fields:On this page, you will see a series of preset contact information fields, including:

    • Contact:This is usually the name responsible for business consultation, such as “Mr. Wang”.
    • Contact phone number:The main contact phone number of the website, recommended to fill in a number that can be dialed directly.
    • Contact address:The detailed address of the company, convenient for visitors to locate.
    • Contact email:The email address used to receive business inquiries or user feedback.
    • WeChat ID/QQ:If you want to interact with customers through WeChat or QQ, you can fill in the information here.
    • WeChat QR Code:Upload your WeChat QR code image for easy scanning by users.
    • Social media link:AnQiCMS built-in support for mainstream social media links such as Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, etc., just fill in the corresponding URL.

  3. Custom Contact Method:AnQiCMS is very flexible, in addition to these predefined fields, it also allows us to add custom contact information to meet specific needs.For example, if you need to add a 'WhatsApp' contact method, you can add it in the 'Custom Settings Parameters' area.

    • Parameter name:This is the field name used when calling the template, it is recommended to use English letters, such asWhatsApp.
    • Parameter value:The contact information content, such as your WhatsApp number or link.
    • Note:For internal management, convenient for you to identify the purpose of this field.

After completing all the information entry, remember to click the save button to ensure the changes take effect.

Secondly, dynamically retrieve and display contact information in the template

Once the contact information on the backend is set up, the next step is to dynamically call this information in the website template. AnQiCMS provides a powerfulcontactTags, it can be very convenient to achieve this.

1. UsecontactTag to get information

contactTags are the key to obtaining contact information. Its basic usage method is{% contact 变量名称 with name="字段名称" %}.

  • 变量名称Optional, if you want to store the obtained value in a variable for subsequent processing or multiple use, you can specify a variable name, such asmyPhone.
  • 字段名称[en]This is a required field, corresponding to the preset field name you filled in the 'Contact Information Settings' on the backend (for exampleCellphone/Email) or the parameter name of a custom field (for exampleWhatsApp).

Let's take a specific example to see how to use it:

  • Get and display the contact number:If we want to display the website's contact number, we can use it directly in the template:

    电话：{% contact with name="Cellphone" %}

    If you want to store it in a variable, you can do it like this:

    {% contact websitePhone with name="Cellphone" %}
<p>电话：{{ websitePhone }}</p>

  • Get and display the contact email:Similarly, getting email information is also very simple:

    邮箱：{% contact with name="Email" %}

    or:

    {% contact websiteEmail with name="Email" %}
<p>邮箱：{{ websiteEmail }}</p>

  • Get and display the social media links:For social media links like Facebook, just use the corresponding field name:

    <a href="{% contact with name='Facebook' %}" target="_blank">我们的Facebook主页</a>

  • Get and display custom contact information:If you have customized one in the background:WhatsAppField, the calling method is consistent with the preset field:

    WhatsApp：{% contact with name="WhatsApp" %}

2. Convert contact information into clickable interactive elements

To enhance the user experience, we usually convert phone numbers and email addresses into clickable links, allowing users to directly dial or send an email.

  • Clickable phone number:Utilizetel:[en]The protocol allows users to make a phone call directly on their phone after clicking:

    {% contact phoneNum with name="Cellphone" %}
{% if phoneNum %}
    <a href="tel:{{ phoneNum }}" class="contact-phone">{{ phoneNum }}</a>
{% endif %}

    [en]Here we also added a:{% if phoneNum %}Ensure that the link is only displayed when the phone number is not empty, to avoid blank pages or broken links on the page.

  • Link for sending emails:Utilizemailto:Protocol, when the user clicks it, it will invoke the email client:

    {% contact emailAddr with name="Email" %}
{% if emailAddr %}
    <a href="mailto:{{ emailAddr }}" class="contact-email">{{ emailAddr }}</a>
{% endif %}

3. Display WeChat QR code

If you have uploaded a WeChat QR code, you can display it in the following way:

{% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %}
    <div class="wechat-qr-code">
        <img src="{{ wechatQrcode }}" alt="微信二维码">
        <p>扫码添加微信</p>
    </div>
{% endif %}

Three: Actual Application Scenarios and Advanced Techniques

The dynamically obtained contact information can be flexibly placed in various key areas of the website, such as the header, footer, contact us page, and even the sidebar.

  1. **Uniform header and footer**