How to conveniently display the company's contact phone number and address with the `contact` tag?

In website operation, clearly and conveniently displaying the company's contact information is a key link to enhance user trust and promote business communication.Whether it is seeking cooperation, providing customer support, or simply to let visitors understand where the company is located, contact information plays a vital role.AnQiCMS knows this very well and provides us with a very convenient way to manage and display this information through its powerful template tag system.

Today, let's delve into the AnQiCMS we have been discussing.contactThe cleverness of the label, see how it helps us easily display the company's contact information and address on the website.

Firstly, where does the contact information come from? From the unified management backend.

All contact information that needs to be displayed on the website front-end must be unifiedly set in the AnQiCMS background.This centralized management approach means that we only need to update the information in one place, and all the places on the website that call this information will be synchronized updated, greatly improving operational efficiency and avoiding the trouble of manually modifying multiple places.

To make these settings, you can enter the AnQiCMS backend management interface, find the left menu item of“Background Settings”and then clickthe "Contact Information Settings".

After entering this page, you will see a series of preset common contact information fields, such as:

  • Contact person (such as "Mr. Wang")
  • Contact phone number
  • Contact address
  • Contact email
  • WeChat ID
  • WeChat QR code image

These are the most common contact information on the website, usually sufficient to meet daily needs. But AnQiCMS is powerful in that, if these default fields cannot fully meet your personalized needs, you can also easily addCustom settings parameters.For example, you may need to display a WhatsApp contact or a direct line phone number for a specific department.WhatsApporCustomerServicePhoneFill in specific information in the "Parameter Value" and briefly describe its purpose in the "Notes" field, save it after use.This flexibility ensures that your contact information can be accurately displayed in any business scenario.

How to display on the website?contactConvenient application of tags

Once the backend is set up, the next step is how to call and display this information on the website page. AnQiCMS provides a very intuitive and easy-to-use template tag.contact.

contactThe basic usage of tags is{% contact 变量名称 with name="字段名称" %}.

There are several key points to understand:

  • 字段名称: These are the predefined field names you see in the background "Contact Settings" (such asCellphone/Address/Emailor you create your own custom parameter name (such asWhatsApp). It is case-sensitive, please make sure it matches the backend settings.
  • 变量名称(Optional): You can choose to assign the contact information to a variable (such as{% contact myPhone with name="Cellphone" %}), so that you can access it in subsequent code by{{ myPhone }}Reference it to perform more flexible operations, such as adding styles or making logical judgments. If complex processing is not required, it can also be omitted.变量名称The tag will directly output the corresponding value, for example,{{ contact with name="Cellphone" }}.

Let's look at some common examples to see how to use it:

Display the company's contact information

Suppose you want to display the company's contact information in the footer of the website or on the 'Contact Us' page.

The simple direct output method is:

电话：{% contact with name="Cellphone" %}

If you want this phone number to be clickable and dialed directly, enhancing user experience, you can combine it with HTML'stel::

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

Displaying the company's address

Similarly, displaying the company address is also very simple:

公司地址：{% contact with name="Address" %}

Embed WeChat QR code image

For contact information like WeChat QR codes that require image display, you can upload the QR code image on the backend and associate it with the "WeChat QR code" field, then throughcontactRetrieve its URL and then embed it into<img>tags:

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

Call a custom contact method

If you have customized a setting named in the backgroundWhatsAppThe parameter is used to store WhatsApp contact numbers, so when calling it on the front end, you only need to use the parameter name you set:

WhatsApp：<a href="https://wa.me/{{ contact with name="WhatsApp" }}" target="_blank">{{ contact with name="WhatsApp" }}</a>

Application in a multi-site environment

AnQiCMS supports multi-site management, if you are operating multiple brands or sub-sites and need to display contact information of other sub-sites on the main site or a specific page,contactThe tag can also do the job. It supports asiteIdparameter that allows you to specify the site ID to be called.

For example, display the contact address of the child site with ID 2:

子站点联系地址：{% contact with name="Address" siteId="2" %}

Make sure that the relevant information is configured in the "Contact Information Settings" on the child site in the background.

Practical tips and tricks

While usingcontactWhen labeling, there are several tips that can help you better enhance user experience and website effectiveness:

  1. Maintain consistencyIt is recommended to maintain consistency of contact information at multiple key locations on the website (such as the page header, footer, "Contact Us" link in the navigation bar, and the independent contact page).The centralized management feature of AnQiCMS makes this very simple, as long as the background data is correct, the front-end call will always be consistent.
  2. Optimize interactive experience：The phone number and email address should be set as clickable links (usingtel:andmailto:Prefix), so visitors can directly click to make a call or send an email, saving the trouble of manually copying and pasting, especially on mobile devices, this convenience is particularly important.
  3. Consider responsive designIf your website uses responsive design, make sure that the contact information is displayed clearly and legibly on different device sizes, and that the clickable link area is large enough for easy touch.
  4. Structured data (SEO friendly): AlthoughcontactThe tag itself is used for page display, but you can also consider making this key contact information (such as address, phone) structured data (such as Schema.org'sLocalBusinessEmbed the type into the page to help search engines better understand your company information, which helps with local SEO optimization.

AnQiCMS'contactThe label not only simplifies the management of company contact information, but also provides a flexible calling method, whether it is standard information or customized needs, it can easily meet the requirements.By reasonable use, your website can more efficiently connect with visitors and improve business conversion.

Frequently Asked Questions (FAQ)

1. How to add a custom contact method in the background, such as 'Complaint Phone'?Answer: In the AnQiCMS background, go into“Backstage Settings”->“Contact Information Settings”Page. Find it at the bottom of the page"Custom Setting Parameters"Area, click to add a new parameter."Parameter name"Enter "ComplaintPhone" (or any name you like) in“Parameter value”Fill in the specific complaint phone number in"Remarks"Write in the