How to dynamically display contact information in website templates?

When operating a website, we often need to display the company's contact information, such as phone, email, address, and even social media links.The traditional way may be to hard-code this information directly in the template, but this way, every time the contact information changes, you need to modify the code, which is麻烦 and easy to make mistakes.

AnQiCMS provides a flexible and efficient solution that allows you to easily display and manage these contact methods in website templates.This means that once the contact information changes, you only need to update it once in the background, and all the places on the website that use this information will be automatically synchronized, greatly improving operational efficiency.

Background settings for contact information

All website contact information is concentrated in the "Anqi CMS" backend of all websitesBackend settingsIn the module. After logging in to the background, find the menu on the left.Backend settingsthen click onContact information settingsAs soon as

You will see some preset contact information fields, such as:

  • Contact: It is usually the name of the company or the main contact person.
  • Contact phone numberThe main contact phone number of the company.
  • Contact addressThe actual office address of the company.
  • Contact emailThe email address used for business communication.
  • WeChat ID/WeChat QR codeConvenient for users to contact through WeChat.
  • QQ/WhatsApp/Facebook/Twitter/TikTok/Pinterest/LinkedIn/Instagram/YouTubeThese cover mainstream social media platforms both domestically and internationally, making it convenient for you to promote globally.

If these built-in fields do not meet your needs, for example, if you need to add a specific department contact phone number, or a less commonly used social media link, Anqi CMS also provides the function of custom settings. Simply click on "Custom Settings Parameters", then fill in:

  • Parameter NameThis is the name you use when calling the template, it is recommended to use English, the system will automatically convert it to camel case. For example, you can setSalesEmailorSupportPhone.
  • Parameter valueThis is the actual contact information, such as[email protected].
  • Note: It is convenient for you to identify the use of this parameter, it will not be displayed on the website front end.

In this way, you can flexibly add, modify, and manage various contact methods according to the actual needs of the website.

Dynamically call contact information in the website template.

After setting up the contact information in the background, you can use the Anqicms in the website templatecontacttags to dynamically display this information. This tag is very intuitive, and its basic usage is:

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

Among them:

  • 变量名称Optional, you can give the obtained data a temporary name for easy reference in the code. If this part is omitted, the tag will directly output the value of the field.
  • name="字段名称"It is crucial, you need to specify the field name of the contact information you want to call, such asCellphone/EmailOr you can customize itWhatsApp.

We will go through some common examples to see how to use it in templates:

1. Display contact phone number

You can display the company's contact phone number at the top, bottom, or on the 'Contact Us' page. For convenience, we can also wrap it in atel:link.

<p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>

2. Display contact email

Similar to a phone number, an email address can also be made clickablemailto:links.

<p>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a></p>

3. Display the company address

Address information is usually displayed in the footer or contact page

<p>地址：{% contact with name='Address' %}</p>

4. Display the WeChat QR code

If your website needs to display a WeChat QR code, you can do so byQrcodeusing the field to call the image uploaded to the backend.

<div class="wechat-qrcode">
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
    <p>扫描微信二维码联系我们</p>
</div>

5. Call the custom WhatsApp account

Assuming you have customized a name in the backgroundWhatsAppfor the contact information, 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>

Here we combined the official WhatsApp link format to allow users to directly jump to chat.

6. Multi-site contact information call

If your Anqicms CMS has deployed multiple sites (through the multi-site management feature), and you want to display the contact information of *other* sites in the template of the current site, you cancontactAdd in the labelsiteIdSpecify the site ID with parameters. For example, if a site with ID 2 has a specific contact phone number, you can call it like this:

<p>分公司电话：<a href="tel:{% contact with name='Cellphone' siteId=2 %}">{% contact with name='Cellphone' siteId=2 %}</a></p>

Practical scenarios and advanced skills

Flexible combination displayBy combining differentcontactLabel, you can display the contact information you need flexibly at any location on the website, such as the footer, sidebar, or pop-up window.

<footer>
    <p>联系人：{% contact with name='UserName' %}</p>
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% 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 class="social-links">
        {% if contact.Facebook %}
            <a href="{% contact with name='Facebook' %}" target="_blank">Facebook</a>
        {% endif %}
        {% if contact.Twitter %}
            <a href="{% contact with name='Twitter' %}" target="_blank">Twitter</a>
        {% endif %}
    </div>
</footer>

Handle null valuesTo avoid blank or unattractive text appearing on the page when some contact information is empty, you can make a judgment before displaying it. CombineifLogical judgment tags anddefaultThe filter can make the template more robust.

{% if contact.Cellphone %}
    <p>电话：<a href="tel:{% contact with name='Cellphone' %}">{% contact with name='Cellphone' %}</a></p>
{% else %}
    <p>电话：暂无</p>
{% endif %}

{# 或者使用default过滤器提供默认值 #}
<p>电话：{% contact with name='Cellphone' %}|default:"暂无联系电话"</p>

Of Security CMScontactTags bring great convenience and flexibility to website contact information management.By simple backend configuration and template calls, you can build dynamic, easy to maintain, and user-friendly websites.No longer need to worry about frequently modifying the code due to changes in contact information.