The contact, phone, and address information of the website is an important bridge for the enterprise to communicate with the outside world.They not only showcase the real existence of the enterprise to visitors but also provide a direct path for users to seek help, consult products, or services.In AnQiCMS, the settings and calls of this information are designed to be both flexible and efficient, making it easy to implement, whether it's standard fields or custom requirements.

Set the contact information in the AnQiCMS backend

To set the contact information, you need to log in to the AnQiCMS backend, then navigate to the 'Backend Settings' menu, and select the 'Contact Information Settings' option.On this page, you will see a series of preset contact information fields that cover most commonly used contact methods by enterprises, such as contact name, phone number, address, and email.You can fill in these fields one by one according to the actual situation of your company.If your business also involves WeChat or other social media platforms, you can also fill in your WeChat ID and upload a WeChat QR code here for users to scan and add.

The strength of AnQiCMS lies in its scalability.If the preset fields do not meet your specific needs, such as when you need to add a WhatsApp contact, a Facebook page link, or specific business hours, you can add new fields by using the 'Custom Setting Parameters' feature.When adding custom parameters, you need to specify a "parameter name", which will be the identifier you use to call this field in the template.At the same time, you also need to fill in the "Parameter Value", which is the actual contact information.To facilitate management and understanding, you can also add a "remark" for each custom parameter to describe its purpose.For example, you can add a parameter name called 'WhatsApp', with the parameter value being your WhatsApp number, and note it in the remarks as 'International Business Contact Information'.

Contact information is called in AnQiCMS template

After setting up the contact information in the background, the next step is to display this information on the frontend of the website. AnQiCMS provides special template tagscontactInvoke this information to ensure the separation of data and display, making template design more concise and efficient.

contactThe usage of tags is very flexible. Usually, you would use{% contact 变量名称 with name="字段名称" %}to call in the format. The "field name" corresponds to each contact method you set up in the background.nameParameter. If you do not need to store the result of the call in a variable, you can use it directly.{% contact with name="字段名称" %}To output.

For example, if you want to display the contact phone number in the footer of the website, you can call it like this:

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

This code will output a link with a phone number, which users can click to make a phone call. Similarly, to display contact address or contact email, you can use respectively.name="Address"andname="Email":

<p>联系地址：{% contact with name="Address" %}</p>
<p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

For the custom contact information you added in the background, such as the WhatsApp contact information mentioned earlier, you can also use the defined "parameter name" to call it. Assuming the parameter name you set isWhatsAppThen when calling it in the template, it looks like this:

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

This label has another practical feature that supports multiple sites. If you have managed multiple sites in the AnQiCMS backend and want to call the contact information of other sites in the current site's template, you can usesiteIdParameters can be used to specify the target site. For example,{% contact with name="Cellphone" siteId="2" %}The contact number of the site with ID 2 will be called.

Through these template tags, you can seamlessly integrate contact information into any location on the website, whether it's the header, footer, sidebar, or a standalone 'Contact Us' page, maintaining consistency and ease of use.

Display contact information **practicalities

As a website operator, I suggest you follow these **practicalities when displaying contact information:

  • Maintain consistency of informationEnsure that all contact information displayed on the website, including different pages, headers and footers, online forms, etc., uses the latest and accurate data.

  • Highlight important information【en】Put the most commonly used contact methods (such as phone and address) in an easily accessible location, such as the top navigation bar or footer of the website.

  • Utilize hyperlinks for convenience of users【en】Convert the phone number totel:Link, convert the email address tomailto:Link, convenient for users to click and communicate directly.

  • Consider structured data: Although AnQiCMS'scontactTags do not directly generate Schema Markup, but you can usejsonLdLabel this information, manually add the JSON-LD structured data for the company contact information, which helps search engines better understand your company information and improve local search visibility. For example, you canbase.htmlAdd the following code in the or standalone contact page template:

    {% jsonLd %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "{% system with name="SiteName" %}",
  "url": "{% system with name="BaseUrl" %}",
  "contactPoint": [{
    "@type": "ContactPoint",
    "telephone": "{% contact with name="Cellphone" %}",
    "contactType": "customer service"
  },{
    "@type": "ContactPoint",
    "email": "{% contact with name="Email" %}",
    "contactType": "customer service"
  }],
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "{% contact with name="Address" %}",
    "addressLocality": "您的城市", {# 需要手动填写或通过自定义字段获取 #}
    "addressRegion": "您的省份", {# 需要手动填写或通过自定义字段获取 #}
    "postalCode": "您的邮编", {# 需要手动填写或通过自定义字段获取 #}
    "addressCountry": "您的国家" {# 需要手动填写或通过自定义字段获取 #}
  }
}
</script>
{% endjsonLd %}

    Please note,addressLocality/addressRegion/postalCodeandaddressCountryYou need to fill in manually according to the actual situation or set and call through custom fields in the background.

Through these steps and **practice, you will be able to efficiently set up and call the contact, phone, and address information of the website in AnQiCMS, thereby providing your website visitors with better service and experience.

Frequently Asked Questions

Q1: Why didn't the website front end update immediately after I modified the contact information in the background?

A1: AnQiCMS uses caching to enhance website performance.After you modify the backend settings, you may need to clear the website cache to see the latest changes on the front end.You can log in to the AnQiCMS backend, click the 'Update Cache' button at the bottom of the left menu, or look for the related cache clearing options on the settings page.If it still does not work, please check your browser cache, try to force refresh the page (Ctrl+F5 or Cmd+Shift+R) or clear the browser cache.

Q2: I want to add a map link next to the contact address, does AnQiCMS support it?

A2: AnQiCMS itself does not automatically convert addresses to map links, but you can use its custom parameter feature to achieve this.You can add a custom parameter in the "Contact Information Settings", such as "MapLink", and enter the sharing link of your Google Maps or Baidu Maps, etc.{% contact with name="MapLink" %}To display the map link.

Q3: How can I ensure that my contact phone number can be directly dialed on a mobile device?

A3: In your template, when you call a contact phone number, be sure to use HTML'stel:protocol. For example, not simply displaying{% contact with name="Cellphone" %}, but wrapping it in<a>tags, such as<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a>Thus, on devices with dialing capabilities (such as smartphones), users can directly dial the phone number by clicking on it.