How to embed dynamic contact information on the page, such as phone numbers and addresses?

In website operation, maintaining the accuracy and consistency of contact information is crucial.Whether it is a phone number, address, or social media link, this information often needs to be updated. Manually modifying it on each page is not only time-consuming and labor-intensive, but also prone to errors.AutoCMS (AutoCMS) provides a very convenient way for you to dynamically manage and embed these contact information, achieving 'one change, update the whole site'.

Next, we will discuss in detail how to achieve this goal in the Anqi CMS.

Manage contact information centrally in the background

Firstly, all dynamic contact information is managed on the Anqi CMS backend.This greatly simplifies the information update process, ensuring the consistency of all related data on the website.

  1. Access "Contact Information Settings"Login to the AQS CMS backend, and you will see the 'Backend Settings' option in the left navigation bar. Click to expand and select 'Contact Information Settings' to enter the management interface.
  2. Default setting itemIn this interface, Safe CMS has preset some commonly used contact information fields for you, such as:
    • Contact PersonThis is usually used to display the name of the person in charge of external communication.
    • Phone Number：The main consultation or service phone number of the website.
    • Contact Address：Your company or service location.
    • Contact Email：The publicly available email address.
    • WeChat ID/QR code：For users to contact through WeChat easily.
    • In addition, there are links or account settings for mainstream social media and instant messaging tools such as QQ, WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, and Youtube, meeting the needs of global operations. You only need to fill in the latest information in these fields and save.
  3. Customize settings parametersIf the default fields provided do not meet your specific needs, Anqi CMS also offers great flexibility, allowing you to add "custom setting parameters".For example, you may need to display the company's office hours, specific customer service phone numbers, or a less commonly used social media link.
    • Parameter nameThis is an identifier for template usage. We recommend using English, for exampleOfficeHours/ServicePhone. The system will automatically convert it to camel case (first letter capitalized).
    • parameter valueHere you can enter the specific content you want to display on the website, for example, "Monday to Friday 9:00-18:00".
    • [en] NoteYou can add descriptions to custom parameters for easy management and understanding in the future. This way, you can always expand and adjust the information that needs to be dynamically displayed according to the development of your business.

Complete the background settings and save, and this information is ready, it can be called on any page of the website.

Call the contact information flexibly in the template

The AnQi CMS uses a simple template tag syntax, making it very intuitive to call the contact information set in the backend on the front-end page. The core tags arecontactLabel.

  1. contactBasic usage of the tag： In your template file (usually.htmlsuffix files, located/templatedirectory), you can use{% contact with name="字段名称" %}to retrieve and display specific contact information.
    • For example, to display the contact phone number you set in the background:
      
电话：{% contact with name="Cellphone" %}
    • Display the contact address:
      
地址：{% contact with name="Address" %}
    • For the WeChat QR code, you need to place it:<img>Tagssrcthe attribute:
      
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    • Calling your custom "Office Hours" parameter (assuming the parameter name isOfficeHours):
      
办公时间：{% contact with name="OfficeHours" %}
  2. Creating clickable dynamic links： To facilitate users contacting directly through phone or email, you can embed dynamic information into hyperlinks.
    • Phone Link:
      
<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">拨打电话：{% contact with name="Cellphone" %}</a>
    • Email Link:
      
<a href="mailto:{% contact with name="Email" %}" rel="nofollow">发送邮件：{% contact with name="Email" %}</a>
    • WhatsApp Link：If you create a custom field namedWhatsAppand enter the WhatsApp number, you can call it like this:
      
<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">通过WhatsApp联系我们</a>
  3. Call in a multi-site environment： If your security CMS has deployed multiple websites, and each website has independent contact information, you cansiteIdThe parameter is used to specify the contact information of which site to call. Usually, you do not need to setsiteIdit will automatically obtain the contact information of the current site.

Example of practical application scenarios

Understood the background settings and template calling methods, we can then apply them to all important parts of the website.

  1. Website footer (Footer)： Website footer is the most common place to display contact information, as it ensures that the information is visible at the bottom of all pages.
    
<footer>
    <p>联系电话：{% contact with name="Cellphone" %}</p>
    <p>公司地址：{% contact with name="Address" %}</p>
    <p>电子邮件：<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></p>
    <p>办公时间：{% contact with name="OfficeHours" %}</p> {# 假设您自定义了OfficeHours #}
</footer>
  2. “Contact Us” standalone page： An exclusive "Contact Us" page can display all contact methods and maps in more detail. You can create a separate template (such aspage/contact-us.html），然后在其中充分利用 EnglishcontactLabel.
    
<div class="contact-info-block">
    <h3>联系方式</h3>
    <ul>
        <li>联系人：{% contact with name="UserName" %}</li>
        <li>电话：{% contact with name="Cellphone" %}</li>
        <li>地址：{% contact with name="Address" %}</li>
        <li>邮箱：{% contact with name="Email" %}</li>
        <li>微信号：{% contact with name="Wechat" %} <img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 100px; height: auto;" /></li>
        <li>WhatsApp：{% contact with name="WhatsApp" %}</li>
        <li>办公时间：{% contact with name="OfficeHours" %}</li>
    </ul>
</div>
  3. 产品或服务详情页 English： 在某些产品或服务详情页，直接提供联系电话或咨询方式可以提升转化率。 English
    
<div class="product-contact">
    <h4>立即咨询</h4>
    <p>如有疑问，请拨打客服电话：</p>
    <p><a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
    {# 也可以调用产品详情页面的文档参数，比如产品销售电话 #}
    {% archiveDetail productSalesPhone with name="productSalesPhone" %}
    {% if productSalesPhone %}
    <p>销售热线：<a href="tel:{{productSalesPhone}}" rel="nofollow">{{productSalesPhone}}</a></p>
    {% endif %}
</div>

By using the above method, you can easily manage and embed contact information in the Anqi CMS.Whether it is unified update or multi-site personalized settings, Anqi CMS provides flexible and efficient solutions, greatly enhancing the efficiency of website operation and user experience.

Common Questions (FAQ)

Q1: Why should I use dynamic links instead of hardcoding directly in the template?A1: The main advantage of using dynamic contact information is 'change once, update everywhere'.When your phone number, address, and other information change, you only need to modify it once in the "Contact Information Settings" of the Anqi CMS backend, and all pages on the website that call this information will be automatically updated.If you use hardcoding, you will have to manually search and modify on each page, which is not only inefficient but also easy to miss, leading to inconsistent information or errors.

Q2: I want to add a contact such as 'Company Fax' or 'Online Customer Service Link', does the Anqi CMS support it?A2: Fully supported.The "Contact Information Settings" page of Anqi CMS provides the "Custom Setting Parameters" feature.FaxNumberorOnlineServiceLink)，and fill in the "parameter value