How to display contact information on the page, such as phone number, address, etc.

The website's contact information is an important part in building user trust and providing convenient services.Whether displaying a simple phone number at the bottom of the website or providing detailed addresses and social media links on the "Contact Us" page, Anqi CMS offers a flexible and efficient way to manage and present these key information.This article will deeply explore how to set up and display the various contact methods on your website in Anqi CMS, ensuring that your customers can easily find you.

Backend management: Set your contact information uniformly

In Anqi CMS, all websites' common contact information is centralized for management.You just need to enter the background management interface, find the "Contact Information Settings" option under the "Background Settings" menu.

Here, you will see a series of preset common contact information fields, such as 'Contact person', 'Phone number', 'Address', 'Email', 'WeChat ID', and 'WeChat QR code' and so on.These fields cover most of the basic contact requirements for most corporate or personal websites.You just need to fill in your information in the corresponding input box, and the system will automatically save these contents and prepare for the call of the front-end page.

The strength of AnQi CMS also lies in its flexibility. If the preset fields cannot fully meet your needs, for example, if you need to display the company QQ number, WhatsApp link, or phone number of a specific department, the system also provides the function of "custom setting parameters".Here, you can easily add new parameters, name them (the 'parameter name' will serve as the identifier called in the template, it is recommended to use English or Pinyin to improve readability), and fill in specific values.For example, you can set a parameter named "WhatsApp" with your WhatsApp number or link.This can be extended through simple customization even if the contact method is not in the default list.

front-end display: flexibly call through template tags

AnQi CMS uses an intuitive template tag system to make it easy to display this contact information on the website front end. The core calling tag is{% contact %}. This label can help you accurately display the contact information set in the background to the user.

The most direct way to use it is to{% contact with name="字段名称" %}. Here,字段名称This is the parameter name you see in the background "Contact Information Settings" or customize. For example, to display the company's phone number, you can write the template code like this:

<!-- 显示联系电话 -->
<p>联系电话：{% contact with name="Cellphone" %}</p>

Similarly, if you need to display the company's detailed address or contact email, justnamechange the attribute value toAddressorEmailand it is done:

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

<!-- 显示联系邮箱 -->
<p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

for images like WeChat QR codes,{% contact %}The tag will directly return the URL path of the image file. You need to embed it into<img>the tag to display correctly:

<!-- 显示微信二维码 -->
<p>微信二维码：<img src="{% contact with name="Qrcode" %}" alt="微信二维码"></p>

If you add a custom parameter in the background, such as a parameter named "WhatsApp", calling it in the template is also simple:

<!-- 显示 WhatsApp 联系方式 -->
<p>WhatsApp：{% contact with name="WhatsApp" %}</p>

To make the template code cleaner and easier to maintain, you can alsocontactAssign the output of a tag to a variable and then use this variable elsewhere in the template. This method is particularly suitable for situations where you need to refer to a contact information multiple times on the same page:

{% contact companyPhone with name="Cellphone" %}
<p>拨打热线：<a href="tel:{{companyPhone}}">{{companyPhone}}</a></p>

By this method, you can directly convert phone numbers into clickable dialing links, enhancing the mobile user experience.

These contact methods can be flexibly placed anywhere on the website.The most common and recommended practice is to display your contact information in the header (Header), footer (Footer), a dedicated "Contact Us" page, or sidebar, etc., to ensure that users can easily find your contact information no matter where they browse.

Tips for improving user experience and SEO.

When displaying contact information, in addition to ensuring that the information is accurate and error-free, some tips can also significantly improve user experience and website search engine optimization (SEO) effectiveness:

1. Maintain consistency:Ensure that all contact information on the website is kept up to date and consistent. Inconsistent information may reduce the user's trust in the website and may also affect the search engine's judgment.
2. Improve accessibility:For phone numbers, usetel:the link of the protocol (e.g.,<a href="tel:1234567890">1234567890</a>) It is convenient for mobile device users to click and make a direct call. For addresses, consider adding a link to map services for easy navigation.
3. Beneficial for local SEO:Displaying address, phone numbers, and other information clearly and structurally on your website helps search engines better understand your local business, which may improve your local search rankings and attract more potential customers nearby.

AnQi CMS provides high flexibility and convenience in the management and display of contact information.By simple backend configuration and template tags, you can easily display important contact information to users, effectively improving the website's user experience and business conversion rate.

Frequently Asked Questions (FAQ)

Q1: If I need to display multiple phone numbers (such as the sales department, customer service department), can Anqi CMS achieve this?

A1: It can be fully realized. You can add multiple phone numbers by using the "Custom Settings Parameters" feature on the "Contact Information Settings" page in the Anqi CMS backend.For example, you can add a "parameter name" ofSalesPhoneThe parameter value is the sales department phone number; add another one.ServicePhoneThe parameter value is the customer service department phone number. In the template, use separately.{% contact with name="SalesPhone" %}and{% contact with name="ServicePhone" %}to call it.

Q2: Can a specific page on the website (such as a product details page) display independent contact information instead of the site-wide one?

A2: Of Security CMScontactThe tag is mainly used to call the general contact information of the entire site. If a specific page needs independent contact information, you can consider adding a custom field (such as) in the 'Content Management' -> 'Content Model' for the corresponding model (such as the 'Product Model')ProductContactPhoneEnter the exclusive details when editing the product.