How to correctly obtain and display contact information in the template?

In website operation, clearly and effectively displaying contact information is crucial for user experience and business conversion.AnQiCMS (AnQiCMS) provides us with flexible and powerful functions, which can easily obtain and display these key information in templates.

Backend configuration: the source of contact information

In Anqi CMS, all website contact information is centrally managed in the background.This means that whether you need to modify the contact phone number, email, or add new social media links, you don't need to touch any code, just perform simple operations in the background.

First, please log in to your Anqi CMS backend. In the left navigation menu, find and click "Backend Settings", then select "Contact Information Settings".

Enter this page, and you will see a series of default contact information fields, such as "Contact Person", "Contact Phone", "Contact Address", "Contact Email", as well as "WeChat ID" and "WeChat QR Code".These are the most commonly used contact methods for daily website operations.You just need to fill in your information in the corresponding input box.

The strength of AnQi CMS lies in its high customizability.If you find that the default fields are not enough to meet your needs, such as if you want to add extra information like the company's QQ number, WhatsApp link, or even TikTok account, you can easily add them through the page's 'Custom Settings Parameters' feature.

Click the add button next to the 'Custom setting parameters' and you need to fill in three key pieces of information:

  • Parameter NameThis is the unique identifier for the template. It is recommended to use English because it is more standardized in template code.For example, if you want to add WhatsApp, the parameter name can be set toWhatsApp. The system will automatically convert it to camel case (i.e., the first letter of each word is capitalized, for examplecontactWechat), but when calling it, you only need to use the name you set.
  • Parameter valueThis is the specific content of the contact information, such as your WhatsApp account or link.
  • NoteThis is just to help you identify the purpose of this parameter in the background, it will not be displayed on the front end.

After adding custom parameters, remember to click save, so that all contact information is configured and becomes the information source for our template calls.

Front-end template: Flexible retrieval and display of contact information

After configuring the background data, the next step is to display these contact methods to the users in the front-end template. Anqicms provides a special tagcontactMake this process very simple.

contactThe basic method of using the tag is{% contact 变量名称 with name="字段名称" %}. Here,nameThe parameter is the field name you configure in the background "Contact Information Settings" (including default fields and custom fields).

Let's take a look at some specific examples to see how to use it:

  1. Display contact phone number Assuming you want to display the company's contact information in the footer of the website or on the "Contact Us" page. You can write it in the template like this: 

    <div>
    联系电话：{% contact with name="Cellphone" %}
</div>

    If you want to store a phone number in a temporary variable for multiple uses or other processing, you can do it like this:

    {% contact phoneNum with name="Cellphone" %}
<p>我们的客服热线：{{ phoneNum }}</p>
<p>欢迎来电咨询：<a href="tel:{{ phoneNum }}">{{ phoneNum }}</a></p>

  2. Displaying the company's address Similarly, displaying the company address is also very direct:

    <p>公司地址：{% contact with name="Address" %}</p>

  3. Display email address: Display the email and add an email link to it:

    {% contact emailAddr with name="Email" %}
<p>商务合作请联系：<a href="mailto:{{ emailAddr }}">{{ emailAddr }}</a></p>

  4. Fetch WeChat QR code: If the WeChat QR code image is uploaded on the backend, you can useQrcodefield to display it:

    <div class="wechat-qrcode">
    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    <p>扫码添加微信</p>
</div>

  5. Call a custom contact method: If you have customized a field named in the backgroundWhatsAppin it and filled in the WhatsApp account. In the template, you can call it like this:

    <p>WhatsApp联系：{% contact with name="WhatsApp" %}</p>

    Make surenameThe value of the parameter should be consistent with the parameter name you entered in the "Custom Setting Parameter" under the "Contact Information Settings" in the background.

Call the contact method in a multi-site environmentIf you are managing multiple sites in Anqi CMS and want to call the contact information of other sites in the template of the current site,contactLabels also support asiteIdParameters. You can obtain contact information by specifying the ID of another site. For example, to get the phone number of a site with ID 2:

{% contact otherSitePhone with name="Cellphone" siteId="2" %}}
<p>兄弟站点电话：{{ otherSitePhone }}</p>

In most cases, if you are only displaying your contact information in the current site template, this parameter is usually not required.

Combine these calling methods and you can easily build a complete contact information area, for example in the footer of a website:

<footer>
    <div class="contact-info">
        <h3>联系我们</h3>
        <p>地址：{% contact with name="Address" %}</p>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
        {% contact whatsappAccount with name="WhatsApp" %}
        {% if whatsappAccount %}
            <p>WhatsApp: {{ whatsappAccount }}</p>
        {% endif %}
        {% contact wechatQrCode with name="Qrcode" %}
        {% if wechatQrCode %}
            <div class="wechat-qr">
                <img src="{{ wechatQrCode }}" alt="微信二维码" />
                <p>微信扫一扫</p>
            </div>
        {% endif %}
    </div>
</footer>

In this way, your website's contact information is managed uniformly and is easy to update, greatly enhancing the maintenance efficiency of the website.

Frequently Asked Questions (FAQ)

Q1: I have set up the contact information in the background, but it is not displayed in the front-end template. What is the matter?A1: If you have set the contact information in the background but it is not displayed on the front end, please check the following aspects:

  1. Is the template code correct?: Confirm whether you have used in the corresponding template file.{% contact ... %}the tags, andnameThe field name specified by the parameter is consistent with the background settings (note the case).
  2. Is the template file applied?Check if your website is using template files that call code with these contact methods. Sometimes, the template may have been changed, but the new template does not have corresponding code.
  3. Cache issueIn some cases, the browser cache or the cache of AnQiCMS itself may cause the information to be updated in time.Try to clear the browser cache and click the "Update Cache" feature in the AnQiCMS background.
  4. Has the information been saved?Make sure you fill in the information in the "Contact Information Settings" in the background and click the "Save" button at the bottom of the page.

Q2: I want to display some unconventional contact methods on the website, such as the phone numbers of specific departments or overseas social media accounts, but the default fields in the background do not have them. How can I add them?A2: The Anqi CMS provides a flexible 'custom setting parameter' feature to solve this problem.In the "Background Settings" -> "Contact Settings" page, find the "Custom Setting Parameters" area, click the add button.Here, you can create new contact fields for your specific needs.For example, you can add a parameter namedSalesPhone(Sales Phone) orFacebookPage(Facebook Page), and fill in the corresponding "parameter value." Save it, and it can be used in the template{% contact with name="SalesPhone" %}or{% contact with name="FacebookPage" %}was called.

Q3: How can I ensure that each site displays its own contact information independently in AnQiCMS, rather than getting mixed up?A3: The multi-site function of AnQi CMS is independent in contact information management.When you configure information in the "Contact Information Settings" on each site's backend, this information is unique to that site.In the template of the current site, by defaultcontactThe tag will automatically retrieve the contact information of the current site. If you really need to call the contact information of *another specified site* in a template of a site (this is relatively rare), you can usesiteIdparameters, for example{% contact with name="Cellphone" siteId="其他站点ID" %}. Usually, you do not need to specify extra for each sitesiteIdThe system will intelligently display the corresponding contact information based on the site being visited.