How to display the contact information of the website, such as phone number, address, and 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 encourage customers to call for consultation, make it convenient for them to communicate via email, or guide them to the physical store, clear and accurate contact information is essential.In AnQiCMS, displaying this information is very intuitive and flexible. It allows us not only to manage it uniformly but also to display it at different locations on the website according to our needs.

Next, let's take a look at how to cleverly display contact information such as phone number, address, and email in AnQiCMS templates.

Step 1:Unified management of contact information data source

To enable the website frontend 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', which is convenient for随时 calling.

You only 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 Person：通常是您希望客户称呼的名字。
  • Phone Number：网站的主要联系电话号码。
  • Contact Address：公司的具体办公或经营地址。
  • Contact Email：用于接收客户邮件的邮箱地址。
  • WeChat IDandWeChat QR Code：Convenience for customers to contact through WeChat.
  • QQ/WhatsApp/FacebookSocial media links: meet the different contact habits of customers, especially suitable for websites with international business.

The strength of AnQiCMS lies not only in these predefined fields.If your business has special requirements, such as needing to display a 'service hotline' or 'customer service email', you can completely add new settings items through 'custom settings parameters'.ServiceHotline），then fill in the corresponding parameter values (such as 400-123-4567）and remarks, saved, this custom contact method can be called in the template.

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

第二步：In the template, call the contact information

When all contact information on the back-end is properly configured, the next step is to call these data in the website template, so that they can be presented to the visitor. AnQiCMS provides a very convenient template tagcontactUsed specifically to obtain contact information from the backend settings.

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

Let's see how to use this tag with some specific examples:

  • Display contact phone number: In general, phone numbers appear as clickable links for the convenience of mobile users to dial directly.

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

  • Display the company address It is 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 email： Email is also recommended to be made into a clickable link, convenient 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 WeChat QR code pictures on the back-end, you can call them in the template like this:

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

    Here,srcThe attribute will directly obtain the picture address configured on the back-end.

  • Call custom contact information： 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's 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>

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

Some practical tips

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

  1. Maintain consistency of informationEnsure that the contact information displayed on all pages of the website, especially in the footer, sidebar, and 'Contact Us' page, is completely consistent.This can help prevent visitors from getting confused and is also beneficial for search engine optimization.
  2. Consider user experiencePhone number usagetel:Email link usagemailto:Links can greatly enhance the convenience of mobile users, enabling one-click dialing or sending email.Also, make sure that 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 label will default to obtaining the contact information of the current site. If you need to call the contact information of a specific site across sites,contacttag.siteIdParameter to specify. However, for most single-site operation users, it is usually not necessary to consider this parameter.

AnQiCMS through its flexible backend settings and simple template tags makes the management and display of the website contact information unprecedentedly simple.Mastered these skills, you can easily make your website show a professional and friendly side to visitors.

Common Questions (FAQ)

1. Why didn't the website front-end update immediately after I modified the contact information in the background?

This is usually because the website has caching enabled.AnQiCMS to improve website access speed, will cache the page content.When you modify data in the background, the old cache may still be effective.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. Besides phone, email, and address, can I add other types of contact information? For example, WeChat official account ID or online customer service link?

Of course you can.AnQiCMS's “Contact Information Settings” page supports the “Custom Settings Parameters” feature.WeChatOfficialAccountorOnlineServiceLinkThen fill in the corresponding values, save it, and it can be used in the template after that{% contact with name="WeChatOfficialAccount" %}This 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?

AnQiCMS's template system supports template nesting and reference features. Usually, the footer content of a website is extracted into a separate template file, for examplepartial/footer.html. You just need to specify it in thisfooter.htmlWrite all contact information calls in the file, then in the main template file (such asindex.html/detail.htmletc) through{% include "partial/footer.html" %}The label can be introduced. In this way, no matter how many pages you have, you only need to maintain one footer template file, which greatly simplifies code management.