How to display the contact information, phone number, address, and other contact methods set on the website?

In modern website operation, clearly displaying the company's contact information is a key link in establishing trust and facilitating communication with users.AnQiCMS (AnQiCMS) understands this and provides an intuitive and flexible backend setting, allowing you to easily manage and display the contact information, phone numbers, addresses, and other information of the website.This article will introduce how to set and display these important contact information in Anqi CMS.

1. Configure your contact information in the Anqi CMS backend

All contact information displayed on the website's frontend must first be managed uniformly in the Anqi CMS backend. This ensures consistency and ease of updates.

  1. Enter the contact information settings interface:Log in to your AnQi CMS backend management system. In the left navigation bar, find and click "Backend Settings", then select "Contact Information Settings".
  2. Fill in the default contact information:After entering this interface, you will see a series of preset contact information fields, such as:
    • Contact:Generally fill in your name or the name of the customer service representative, such as 'Manager Li', 'Customer Service Xia An'.
    • Contact Phone:The phone number you want the customer to call.
    • Contact address:The detailed address of your company or physical store.
    • Contact Email:Customer email address for consultation.
    • WeChat ID:Your WeChat ID or public account ID.
    • WeChat QR Code:Upload your WeChat QR code image for easy scanning by users. You just need to fill in the accurate information in the corresponding input box.
  3. Expand using custom settings parameters:In addition to the above default fields, Anqi CMS also provides a powerful "custom setting parameter" function.If you have other contact information to display, such as WhatsApp, Facebook homepage links, Twitter accounts, etc., you can add them here.
    • Click "Add Custom Parameter", you can specify the "Parameter Name" (for exampleWhatsApp/Facebook), this name will be used for subsequent calls in the template.
    • Enter the corresponding contact information or link in the "Parameter Value".
    • The "Note" field can help you record the use of the parameter for future management.

After completing the information entry, remember to click save so that this data can be called in the front-end template.

Second, display the contact information in the website front-end template.

The Anqi CMS uses a simple template tag syntax, allowing you to display the contact information set in the background on various positions of the website without writing complex code.

To display contact information on the front end of the website, you will mainly use a core template tag:{% contact %}This tag allows you to retrieve the corresponding value based on the "parameter name" set in the background.

The basic usage is:{% contact with name="字段名称" %}.

Here are some common contact methods used in templates:

  • Display contact name: 
    
<span>联系人：{% contact with name="UserName" %}</span>
  • Display contact phone number: 
    
<span>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></span>
    Here, we not only display the phone number, but also throughtel:The protocol makes it clickable for dialing and addsrel="nofollow"Property.
  • Display contact address: 
    
<span>地址：{% contact with name="Address" %}</span>
  • Display contact email: 
    
<span>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
  • Display WeChat ID: 
    
<span>微信号：{% contact with name="Wechat" %}</span>
  • Display WeChat QR code image:Since the QR code is an image link, to display the image correctly, you need to treat it as<img>label'ssrcProperty value and usually needs to be used|safeFilter to prevent special characters in image links from being escaped and not displayed normally.
    
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    Or, if you want to store the QR code image address in a variable first and then use it:
    
{% contact qr_code_url with name="Qrcode" %}
{% if qr_code_url %}
    <img src="{{ qr_code_url }}" alt="微信二维码" />
{% endif %}
  • Display custom contact information (for example, using WhatsApp):If you have added a custom parameter namedWhatsAppin the background, you can call it in the same way:
    
<span>WhatsApp：{% contact with name="WhatsApp" %}</span>

Important reminder:

  • nameThe value of the parameter must match the field name you entered in the "Contact Information Settings" on the backend (whether it is a default field or a custom parameter name).
  • For image paths, HTML content, etc., it is recommended to use in conjunction with|safea filter to ensure that the content can be correctly parsed and displayed by the browser.
  • If you have enabled the multi-site feature and want to call contact information from other sites, you can{% contact %}the tag withsiteIdparameters, for example{% contact with name="Cellphone" siteId="2" %}.

3. Integrate contact information into the website design

Contact information is usually placed in several fixed positions on the website to ensure that users can find it at any time:

  • Website Header (Header):You can display the contact phone number or email address near the navigation bar or at the top of the page to facilitate quick contact.
  • Website Footer:This is a common location to display complete contact information (including address, phone, email, social media links, etc.).
  • Contact us page: A dedicated contact page can display all detailed contact information, and may include maps, online message forms, etc.
  • Sidebar or floating button:On some websites, you may also see floating customer service buttons or sidebars, providing a quick contact channel.

By following these steps, you can flexibly and efficiently manage and display your website's contact information in Anqi CMS, providing a better access experience for users.

Frequently Asked Questions (FAQ)

  1. How to call a custom contact method (e.g., WhatsApp) on the front end?You need to add custom setting parameters by clicking on the "Backend Settings" -> "Contact Information Settings" page in the Anqi CMS backend. For example, enter the parameter name asWhatsApp，Please enter the corresponding WhatsApp number or link. Then you can use it in the front-end template,{% contact with name="WhatsApp" %}to display its value.
  2. If my website supports multilingual, will the contact information follow the language change?The contact information settings of AnqiCMS are at the site level, not at the language level.This means that the contact, phone number, address, and other information you set will be fixed content and will not be automatically translated or changed due to the language switch of the website.If you need to provide different contact information for different language versions, it is recommended to use the multi-site feature, create an independent site for each language version, and set different contact information in the backend of each site.
  3. Where can I see the contact information after it is set?You can call this contact information from any position on the website front-end template.They are usually placed at the top, bottom, or a dedicated "Contact Us" page of a website.After modifying or adding contact information, you can view the updated content by accessing the website's front-end page (you may need to refresh the browser cache).