How to display the contact information, such as phone number, address, etc., of the website settings?

In modern website operation, clearly displaying the company's contact information is a key step in building trust and facilitating communication with users.AnQiCMS (AnQiCMS) knows this, and provides an intuitive and flexible backend setting for you, allowing you to easily manage and display the contact information, phone number, address, and other information of the website.This article will detail how to set up and display these important contact information in Safe CMS.

1. Configure your contact information in the Anqi CMS backend

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

  1. Enter the contact information setting interface:Log in to your Anqi CMS backend management system. Find and click "Backend Settings
  2. Enter 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” or “Customer Service Xiao An”.
    • Contact phone number:You want the customer to call this phone number.
    • Contact address:The detailed address of your company or physical store.
    • Contact email:The email address provided for customers to send inquiries.
    • 微信号：EnglishYour WeChat personal account number or public account ID.
    • WeChat QR Code:Upload your WeChat QR code image, making it convenient for users to scan and add. Just fill in the accurate information in the corresponding input box.
  3. Expand using custom settings parameters:In addition to the aforementioned default fields, AnQi CMS also provides a powerful "Custom Setting Parameters" feature.If you have other contact information you wish to display, such as WhatsApp, Facebook page link, Twitter account, etc., you can add them here.
    • Click "Add Custom Parameter", you can specify the "Parameter Name" (for exampleWhatsApp/Facebook), this name will be used to call the parameter later in the template.
    • Enter the corresponding contact information or link in the "Parameter Value".
    • The "Notes" field can help you record the use of the parameter, convenient for future management.

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

Part two: Display contact information in the website front-end template.

The Anqi CMS uses a simple template tag syntax, allowing you to display contact information from the backend on various parts of the website without writing complex code.

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

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

The following are some examples of how common contact methods are called in the template:

  • 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 alsotel:make it clickable by protocol and add:rel="nofollow"properties.
  • Display the contact address: 
    
<span>地址：{% contact with name="Address" %}</span>
  • Display the contact email: 
    
<span>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></span>
  • Display the WeChat ID: 
    
<span>微信号：{% contact with name="Wechat" %}</span>
  • Display WeChat QR code image:Because the QR code is an image link, to display the image correctly, you need to treat it as<img>Tagssrcthe attribute value, and usually it requires the use of|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 before using 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, WhatsApp):If you have added a custom parameter namedWhatsAppyou 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 them in conjunction|safefilters 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 %}tag.siteIdparameters, such as{% 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):The contact number or email can be displayed near the navigation bar or at the top of the page, making it easy to contact quickly.
  • Website Footer (Footer):This is a common location to display complete contact information (including address, phone number, email, social media links, etc.).
  • “Contact Us” page:A dedicated contact page can showcase all detailed contact information, and may include maps, online feedback forms, and more.
  • 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 the contact information of your website in the Aqy CMS, providing users with a better access experience.

Common Questions (FAQ)

  1. How to call a custom contact method (e.g., WhatsApp) on the front end?You need to add the custom setting parameters by clicking on "Custom Setting Parameters" in the "Contact Information Settings" page under "Background Settings" in the Anqi CMS background.WhatsApp，Parameter value should be filled with the corresponding WhatsApp number or link. Then you can use it in the front-end template.{% contact with name="WhatsApp" %}.
  2. If my website supports multilingual, will the contact information follow the language switch?The contact information settings of AnQi CMS are at the site level, not at the language level.This means that the contact information, phone number, address, and other information you set will be fixed content and will not be automatically translated or changed due to the switching of the website language.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 backends of each site.
  3. Where can I see the contact information生效 after it is set?You can call this contact information at any location in the website's front-end template.English, they are usually placed at the top, bottom of the website page, or a special "Contact Us" page.After modifying or adding contact information, visit the website's front-end page (may require refreshing the browser cache) to see the updated content.