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

The contact information of the website, such as phone number, email and social media links, is an important bridge for users to connect with us.It is crucial for the accuracy and accessibility of this information in website operation.AnQiCMS as an efficient content management system provides a very convenient way to manage and dynamically display this contact information, allowing us to easily maintain the consistency 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 it in templates and display it in a user-friendly manner.

One, manage contact information centrally in the AnQiCMS background

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

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

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

    • Contact:It is usually the name responsible for business consultation, such as 'Mr. Wang'.
    • Contact Phone:The main contact phone number of the website, it is 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 it in here.
    • WeChat QR Code:Upload your WeChat QR code image for easy scanning by users to add you.
    • Social media links:AnQiCMS includes support for mainstream social media links such as Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube, just enter the corresponding URL.

  3. Custom contact information:AnQiCMS is very flexible, in addition to these preset 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:The field name used when calling the template, it is recommended to use letters, for exampleWhatsApp.
    • Parameter value:The contact information, such as your WhatsApp number or link.
    • Note:For internal management, convenient for you to identify the purpose of this field.

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

Second, dynamically obtain and display contact information in the template.

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

1. UsecontactTags retrieve information

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

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

Let's see how to use it with specific examples:

  • Get and display the contact phone number:If we want to display the website's contact phone 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 the 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 link: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 the contact information into an clickable interactive element

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

  • Clickable phone numbers:Utilizetel:The agreement, after the user clicks, can be directly dialed on the phone:

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

    We also added one here:{% if phoneNum %}Determine, ensure that the link is displayed only when the phone number is not empty, to avoid blank pages or error links on the page.

  • Email link available:Utilizemailto:The protocol, when clicked, 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 upload a WeChat QR code, it can be displayed in the following way:

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

3. Practical application scenarios and advanced skills

The 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. **Unified header and footer