How to dynamically display contact information in a website template?

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 approach might be to hardcode this information directly in the template, but this way, every time the contact information changes, you need to modify the code, which is both麻烦 (troublesome) and easy to make mistakes.

Background settings for contact information

All website contact information is concentrated in the 'Security CMS' background.Backend settingsModule. After logging into the background, find the 'Backend settingsThen click on "".Contact information settings' in the left menu.

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

  • Contact Person: This is usually the name of the company or the main contact person.
  • Phone Number: This is the main contact phone number of the company.
  • Contact Address: This is the actual office address of the company.
  • Contact Email：Used for business communication email address.
  • WeChat ID/WeChat QR Code：Convenient for users to contact through WeChat.
  • QQ/WhatsApp/Facebook/Twitter/Tiktok/Pinterest/Linkedin/Instagram/Youtube：These cover mainstream social media platforms at home and abroad, convenient for global promotion.

If these built-in fields do not meet your needs, such as when you need to add a specific department contact phone number or a less commonly used social media link, the Anqi CMS also provides the feature of custom settings. You just need to click on 'Custom Settings Parameters' and then fill in:

  • Parameter nameThis is the name you use when calling the template, it is recommended to use English, and the system will automatically convert it to camel case naming. For example, you can setSalesEmailorSupportPhone.
  • parameter valueThis is the actual contact information content, such as[email protected].
  • [en] Note：For your convenience in identifying the purpose of this parameter, it will not be displayed on the website frontend.

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

Set the contact information in the background, and then you can use the Anqi CMS in the website template to display this information dynamically. This tag is very intuitive, and its basic usage is:contactTag to dynamically display this information. This tag is very intuitive, and its basic usage is:

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

Among them:

  • 变量名称It is optional, you can give a temporary name to the data you obtain, which is convenient for referencing in the code later. 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 method you want to call here, for exampleCellphone/Emailor the one you customizeWhatsApp.

We will look at several common examples to see how to actually use templates in practice:

1. Display Contact Information

You can display the company's contact phone number at the top of the page, footer, or "Contact Us" page. For convenience, we can also wrap it in a link so that users can directly click to dial.tel:a link.

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

2. Display contact email

Like a phone number, an email address can also be made clickable.mailto:Link.

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

3. Show the company address.

Address information is usually displayed in the footer or contact page.

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

4. Show the WeChat QR code.

If your website needs to display a WeChat QR code, you can do so byQrcodecalling the field to upload the image 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 contact namedWhatsAppYou 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 link format of WhatsApp, allowing users to directly jump to the chat.

6. Contact information call for multiple sites

If your security CMS has deployed multiple sites (via the multi-site management feature), and you want to display the contact information of *other* sites in the current site's template, you cancontactLabel it withsiteIdSpecify 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 techniques

Flexible Combination DisplayBy combining differentcontactLabels, you can display the required contact information 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>

Handling Null ValuesTo avoid blank or unattractive text appearing on the page when certain contact methods are empty, you can make a judgment before displaying it. CombinedifLogical judgment tag 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>

Anqi CMS'scontactThe label brings great convenience and flexibility to the management of website contact information.Build dynamic, easy-to-maintain, and user-friendly websites with simple backend configuration and template calls.No longer need to worry about frequently modifying the code due to changes in contact information.