How to display the contact information of the website, such as phone, address, email, in AnQiCMS templates?

The contact information of the website, like a business card, is an important channel for visitors to understand and trust the website.Whether it is to hope that customers call to consult, or to facilitate them through email communication, or to guide them to the physical store, clear and accurate contact information is essential.In AnQiCMS, displaying this information is a very intuitive and flexible matter, it allows us not only to manage uniformly but also to display at different locations on the website according to needs.

Next, let's take a look at how to cleverly display contact information such as phone numbers, addresses, and email addresses in the AnQiCMS template.

Step 1: Centralize the contact information data source.

To allow the website front-end to display contact information, you first need to perform unified configuration and management in the AnQiCMS backend.This is like entering all contact information into a "contact list" for easy access at any time.

You just need to log in to the AnQiCMS backend, navigate to "Backend Settings", and then click the "Contact Information Settings" option. Here, you will see some default settings, such as:

  • Contact: This is the name you would like your customers to call you by.
  • Contact phone number: The main contact phone number of the website.
  • Contact addressThe specific office or business address of the company.
  • Contact email: The email address used to receive customer emails.
  • WeChat IDandWeChat QR code: Convenient for customers to contact via WeChat.
  • QQ/WhatsApp/FacebookSocial media links: meet the contact habits of different customers, especially suitable for websites with international business.

The strength of AnQiCMS lies not only in these preset fields.If your business has special requirements, such as needing to display a "service hotline" or "customer service email", you can add new settings items through "custom settings parameters."}You only need to enter a parameter name (such as in English, such asServiceHotline), then fill in the corresponding parameter values (such as400-123-4567) and remarks, after saving, this custom contact method can be called in the template.

Through centralized management on the backend, no matter how many pages of the website need to display contact information, you only need to update it in one place, which greatly improves operational efficiency.

Step 2: Call contact information in the template

After the contact information on the back-end is properly configured, the next step is to call these data in the website template to display them to visitors. AnQiCMS provides a very convenient template tag.contactUsed to obtain contact information set in the background.

You can display contact information in any template file that requires it (such as, page header)header.html, footerfooter.htmlor the "Contact Us" pagepage/contact.htmlUse this tag in the background. Its basic usage is{% contact 变量名称 with name="字段名称" %}The field name is the English name you see when setting up in the background, such asCellphone/Address/Emailetc.

Let us look at some specific examples to see how to use this tag:

  • Display contact phone number: Generally, phone numbers appear as clickable links, convenient for mobile users to dial directly.

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

  • Display the company address: It is a common practice to clearly list the company address in the footer or contact page of the website.

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

  • Display contact emailThe email is also recommended to be made into a clickable link for visitors to send emails directly.

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

  • Embed WeChat QR code: If you have uploaded a WeChat QR code image on the backend, you can call it in the template like this:

    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />

    here,srcThe attribute will directly obtain the image address configured on the backend.

  • Call a custom contact method: If you have added a custom field namedWhatsApp, you can call it like this:

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

You can combine these calls to create a block containing all the necessary contact information, such as a website footer:

<div class="footer-contact">
    <h3>联系我们</h3>
    <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="wechat-qr">
        <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
        <p>微信：{% contact with name="Wechat" %}</p>
    </div>
    <p>在Facebook上找到我们：<a href="{% contact with name="Facebook" %}" target="_blank">{% contact with name="Facebook" %}</a></p>
</div>

BycontactLabel, you can flexibly display this information at any location on the website, ensuring that visitors can find your contact information at any time.

Some practical tips

When displaying contact information on a website, in addition to accurately calling data, there are some small details that can help improve the user experience and professionalism of the website:

  1. Maintain consistency of informationMake sure that the contact information displayed on all pages of the website, especially the footer, sidebar, and "Contact Us" page, is completely consistent.This can avoid visitors from being confused, and it is also helpful for search engine optimization.
  2. Consider user experience: Use phone numbertel:Use link, emailmailto:Links can greatly enhance the convenience of mobile users, enabling one-tap dialing or sending email.At the same time, ensure that the social media links open in a new window to prevent visitors from leaving your website.
  3. Pay attention to multi-site situationsIf you have enabled the multi-site management feature in the AnQiCMS backend and different sites need to display independent contact information,contactThe tag defaults to retrieving the contact information of the current site. If you need to call the contact information of a specific site across sites, you cancontactthe tag withsiteIdSpecify the parameter. However, for most users operating single-site operations, it is usually not necessary to consider this parameter.

AnQiCMS through its flexible backend settings and concise template tags makes the management and display of website contact information simpler than ever before.Mastering these skills, you can easily let your website show a professional and friendly side to your visitors.

Frequently Asked Questions (FAQ)

1. I changed the contact information in the background, why didn't the website front end update immediately?

This is usually because the website has enabled caching. AnQiCMS caches page content to improve website access speed.After you modify the data in the background, the old cache may still be in effect.You can try to log in to the AnQiCMS backend, click the "Update Cache" option at the bottom of the left menu, clear the website cache, and the front page will display the latest contact information.

2. Can I add other types of contact information besides phone, email, and address? Such as WeChat Official Account ID or online customer service link?

Of course you can. The "Contact Information Settings" page of AnQiCMS supports the "Custom Setting Parameters" feature.Just click Add Custom Parameter, enter a new parameter name (such asWeChatOfficialAccountorOnlineServiceLinkEnter the value, save it, and it can be used in the template afterwards{% contact with name="WeChatOfficialAccount" %}This tag call greatly increases the flexibility of contact information display, meeting various business needs.

3. If I don't want to write the contact information template code on the footer of each page, is there a more concise way?

The AnQiCMS template system supports template nesting reference feature. Usually, the footer content of a website is extracted into an independent template file, such aspartial/footer.html. You just need to do this infooter.htmlWrite all the call code for all contact information in the file, then pass through in the main template file (such asindex.html/detail.htmletc){% include "partial/footer.html" %}Label it and you're done. This way, no matter how many pages you have, you only need to maintain one footer template file, greatly simplifying code management.