How to dynamically display the `contact` label of the company contact information?

In website operations, clear, accurate and easy-to-update business contact information is a crucial link.Imagine if you need to update your contact phone number or email, would you need to manually modify every web page that contains this information?This is time-consuming and labor-intensive, and it may also lead to inconsistent information due to omissions, affecting user experience and brand image.

AnQiCMS (AnQiCMS) is well-versed in this, and to address this pain point, it has specially providedContact Information Tagcontact. This tag's cleverness lies in its ability to dynamically display your company's contact information, meaning that all contact information displayed on the website is centrally managed and can be updated with one click, completely saying goodbye to the繁琐 manual modification.

Core advantages: Why choosecontactTag?

UsecontactTag to manage corporate contact information, mainly has the following significant advantages:

  1. Centralized management, one-click updateAll contact information is stored in a unified location in the background.No matter how many pages of your website reference this information, you only need to modify it once in the background, and all front-end pages will be synchronized updated, greatly enhancing operational efficiency.
  2. Ensure consistency of informationThrough centralized management, it can effectively avoid the problem of inconsistent information caused by manual modification, ensuring that users can obtain the latest and most accurate contact information anywhere on the website.
  3. independence of theme and templateYour contact information is no longer hardcoded in the template file. This means you can freely change the website theme without worrying about losing contact information or needing to reconfigure, as long as the new template correctly callscontactLabel, information can be automatically adapted.
  4. Highly scalable：In addition to the system predefined contact methods, you can also customize more contact fields according to business needs and easily call them in templates.

Backend configuration: Information source management

To implement the dynamic display of contact information, you first need to configure it in the AnQiCMS backend.Navigate to the "Contact Settings" page under "Background Settings", where you will see an intuitive management interface.

The system provides a series of commonly used fields, such as: contacts (UserName), phone number (Cellphone), contact address (Address), contact email (Email), WeChat ID (Wechat), WeChat QR code (Qrcode) and so on. These fields can be filled in with your company information.

What is more powerful is that when the default field cannot meet your personalized needs, Anqi CMS allows you toCustom settings parametersFor example, if your company needs to display WhatsApp contact information, you can add a parameter named "WhatsApp contact information" in the custom parametersWhatsAppPlease fill in your WhatsApp account number. This custom contact method can be called like built-in fields.

Template call:contactThe use of tags

Once the backend configuration is complete, it becomes very simple to call this contact information in the website template.contactThe basic format of the tag is:

{% contact 变量名称 with name="字段名称" %}

There are a few key points:

  • 变量名称Optional, if you do not set the variable name, the label will directly output the value of the field. If you set a variable name (such asmyPhone), then the value of the field will be assigned tomyPhoneVariable, you can use it in the template code later{{myPhone}}to refer to.
  • name="字段名称"Is the specific contact method you want to call. This field name must be consistent with the parameter name set in the background, whether built-in or custom, and case-sensitive.
  • siteIdParameters are usually not required, but in the scenario of multi-site management, if you need to call contact information from other sites, you can do so throughsiteIdspecify.

Let's see how to apply it through some practical examples:

1. Call the built-in contact information:Suppose you want to display the company's contact phone number, email, and address in the footer:

<p>
    联系电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a><br>
    联系邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a><br>
    公司地址：{% contact with name='Address' %}
</p>

If you want to call WeChat QR code, it is usually an image link that needs to be combined<img>Tags:

{% contact wechatQrcode with name='Qrcode' %}
{% if wechatQrcode %}
    <img src="{{wechatQrcode}}" alt="微信二维码" style="width: 100px; height: auto;">
{% endif %}

Here, we first assign the QR code image address towechatQrcodeVariable, then check if the variable exists to avoid displaying a broken image icon when the image address is empty.

2. Call custom contact information:If you have customized a name in the backgroundWhatsAppThe field to display the WhatsApp account, you can call it like this:

<p>
    WhatsApp：<a href="https://wa.me/{% contact with name='WhatsApp' %}" target="_blank">{% contact with name='WhatsApp' %}</a>
</p>

In practical applications, you can embed these tags in the website header, footer, contact us page, sidebar, and even in the article content. No matter where you usecontactLabel, it will dynamically obtain the latest information from the background and display it.

Practical skills and precautions

  • HTML Link Protocol: For phone numbers, you can make use oftel:Protocol to implement click-to-dial; for email addresses, you can usemailto:Protocol to implement click-to-send email, all of these can be embedded directlycontactThe output value of the tag.
  • Ensure information security: AlthoughcontactTags facilitate information management, but when configuring the background, please ensure that the information you fill in is accurate and error-free, especially the contact information that is publicly disclosed.
  • Template design and user experience: Contact information is usually the key content that users are looking for. Please place them in a prominent position on the website and use clear and understandable text and icons.

Through AnQi CMS'scontactLabel, the contact information management of corporate websites has become unprecedentedly simple and efficient.It not only ensures the accuracy and consistency of information, but also allows website operators to invest their valuable energy in more important content creation and market promotion, thereby improving overall operational efficiency and customer satisfaction.

Frequently Asked Questions (FAQ)

Q1: If my website is multilingual or has multiple sites,contacthow can I differentiate the contact information displayed for different languages/sites?

A1: contactTag supportsiteIdParameters, theoretically can call the contact information of the specified site.However, the 'Contact Information Settings' of AnqiCMS is usually site-level.In a multilingual website, a better practice is to set contact information separately for each language site.If your multilingual site is deployed as an independent AnQiCMS instance, each will have its own independent backend settings,contactThe label automatically retrieves information about the current site. If it is a multi-site feature under the same AnQiCMS instance, you need to selectively display it through the judgment of the current site ID in the template, or configure it separately for each site.

Q2: Can I directly usecontactAre you setting a link style in the tag, such as clicking a phone number to dial directly?

A2: contactThe tag itself only outputs the text content of contact information or image links. To add a click-to-dial feature for phone numbers (such astel:agreement), or to add a click-to-send email feature (such asmailto:Protocol), you need to manually write the corresponding HTML link structure and setcontactthe output value of thehrefattribute content. For example:<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a>.

Q3: If I have not set up a contact in the background but call it in the template, what will it display?

A3:If a contact method is not set in the background but is called in the templatename.contactLabels will not output anything. This helps keep the website interface tidy, and it will not display empty fields or error messages.If you need to provide a default placeholder for fields that are not set, you can combine conditional judgment in the template or use the Anqin CMS template engine's filter (such asdefaultto implement the filter.