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

It is crucial to maintain the accuracy and consistency of contact information in website operations.Whether it is a phone number, address, or social media link, this information often needs to be updated. If it is modified manually on each page, it is not only time-consuming and labor-intensive, but also prone to errors.AnQiCMS (AnQiCMS) provides a very convenient way for you to dynamically manage and embed these contact information, achieving 'one modification, update the entire site'.

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

Centralize the management of contact information in the background.

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

  1. Access "Contact Information Settings".After logging into the Anqi CMS backend, 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 ItemOn this interface, Anqi CMS has preset some commonly used contact information fields for you, such as:
    • ContactGenerally used to display the name of the person in charge of external contact.
    • Contact phone numberThe main consultation or service phone number of the website.
    • Contact addressYour company or service location.
    • Contact emailThe publicly available email address.
    • WeChat ID/QR codeFor easy contact through WeChat.
    • 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, which meet the needs of global operations. You only need to fill in the corresponding latest information in these fields and save it.
  3. Custom 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 after-sales service phone numbers, or a rarely used social media link.
    • Parameter NameThis is an identifier for template usage. We recommend using English, for exampleOfficeHours/ServicePhoneThe system will automatically convert it to camel case (with the first letter capitalized).
    • Parameter valueEnter the specific content you want to display on the website, for example, 'Monday to Friday 9:00-18:00'.
    • Note: You can add descriptions for custom parameters for future management and understanding. In this way, you can expand and adjust the dynamic information displayed according to business development at any time.

After completing and saving the background settings, this information is ready and can be used on any page of the website.

Flexible contact information can be called in the template.

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

  1. contactBasic usage of tagsIn your template file (usually.htmlthe file with the/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 contact address:
      
地址：{% contact with name="Address" %}
    • For the WeChat QR code, you need to place it in:<img>label'ssrcthe attribute:
      
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    • Invoke your custom "office hours" parameter (assuming the parameter name isOfficeHours):
      
办公时间：{% contact with name="OfficeHours" %}
  2. Create a clickable dynamic link: To make it convenient for users to contact directly via 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 have created a custom field namedWhatsAppand entered 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. Calling in a multi-site environment: If you have deployed multiple websites for your security CMS and each website has independent contact information, you can accesssiteIdParameters are used to specify which site's contact information to call. In most cases, you do not need to setsiteIdit will automatically obtain the contact information of the current site.

Example of practical application scenarios

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

  1. Website Footer (Footer)The 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” independent pageA dedicated "Contact Us" page can display all contact information and maps etc. You can create a separate template for this page (for examplepage/contact-us.htmlThen make full use of itcontact.
    
<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. Product or service details pageIn some product or service details pages, providing contact information or consultation methods directly can improve conversion rates.
    
<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 implement dynamic management and embedding of contact information in Anqi CMS.Whether it is unified update or personalized settings for multiple sites, Anqi CMS provides flexible and efficient solutions, greatly enhancing the efficiency and user experience of website operations.

Frequently Asked Questions (FAQ)

Q1: Why should I use dynamic contact information instead of hardcoding it directly in the template?A1: The main benefit of using dynamic contact information is that "one change, update the entire site".When your phone number, address and other information change, you only need to modify once in the "Contact Information Settings" of the Anqi CMS backend, and all pages on the website that call these pieces of information will update automatically.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: Do I support adding a 'company fax' or 'online customer service link' like this contact information?A2: Full support. The 'Contact Settings' page of AnQi CMS provides the function of 'Custom Setting Parameters.'You can click 'Add Custom Setting Parameter' and then enter a 'parameter name' (such asFaxNumberorOnlineServiceLink)，and enter the specific fax number or link in the "Parameter Value". Then add a "Remark" for identification. Save it, and you can use it in the template with `{% contact with name=“Fax"