In today's digital age, a website's contact information is more than just cold numbers or addresses; it is the bridge between users and the establishment of trust and communication with the enterprise.Efficiently and accurately display this information on the website, and be able to update it flexibly as needed, which is crucial for any website operator.AnQiCMS as an enterprise-level content management system provides a very intuitive and powerful solution, allowing you to easily manage these key information without touching complex code.
This article will detail how to configure and dynamically retrieve the contact information of the website in AnQiCMS, ensuring that your website always displays the latest and most accurate contact information.
Background configuration: the information source of contact information
All dynamic contact methods on the website, their origins are concentrated in the AnQiCMS backend settings. This is the 'command center' where you can centrally manage and update contact information.
First, log in to the AnQiCMS backend management interface. In the left navigation bar, you will see a menu item namedBackend settingsClick to enter, and then continue to select the menu item in the left navigation bar calledContact information settings.
After entering the "Contact Information Settings" page, you will find that the system has pre-set many commonly used contact information fields, such as:
- Contact Person: This is usually the name of the contact person you want to display publicly.
- Phone Number[en]: This is the phone number for users to call for consultation.
- Contact Address[en]: This is the specific geographical location of your company or service point.
- Contact Email[en]: Users can contact you via email.
- WeChat ID[en]: This is used to add you as a WeChat friend.
- WeChat QR CodeDirectly upload the QR code image for easy scanning by users.
- In addition, it also supportsQQ/WhatsApp/Facebook/Twitter/Tiktok/Pinterest/Linkedin/Instagram/YoutubeLinks or account information of mainstream social media platforms.
You just need to fill in your latest information in the corresponding input box, and the system will save it properly.
The strength of AnQiCMS also lies in its high customizability. If you have a contact method specific to your business that is not included in the above list, or need some special display content, you can access it via the “Customize settings parameters[en]Add functionality flexibly.
For example, you may need to display a dedicated customer service phone number for a company in a specific region, which is different from the general contact number. You can click to add, set a distinctive “Parameter nameFor exampleAreaServicePhoneThen fill in the specificparameter valueFor example010-88889999), and add a[en] NoteExplanation of its use.This 'parameter name' will be the key identifier you call this information with on the website front-end template.Through this method, AnQiCMS ensures that the system can adapt to various personalized business needs.
Front-end display: call the template tags flexibly
After configuring all contact information in the background, the next step is how to dynamically present this information on the front-end page of your website.AnQiCMS uses a template engine syntax similar to Django, allowing you to bind background data to any location on the page in a very intuitive and convenient manner.
The core is “Contact Information Tag”，its basic usage format is{% contact 变量名称 with name="字段名称" %}.
nameParameter: This is the information you filled in the “Contact Information Settings” on the back endField Name(such asCellphone,Email) orCustom Parameter Name[As you add]WhatsApp).
Let's look at some specific examples to see how we can flexibly call this information in the template:
Display contact phone number:The contact phone number is usually displayed in the footer or on the contact us page of a website. You can insert it in the template file:
<p>联系电话：{% contact with name="Cellphone" %}</p>Display the contact email:You can call the email address like this for the convenience of contacting users via email:
<p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>Display the WeChat QR code:For contact information of image type, such as WeChat QR code, you need to present it as:
imgTagssrcPlease ensure that the QR code image has been uploaded on the backend.<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />Display the custom WhatsApp link:If you have added a custom in the backend,
WhatsAppContact information, and its 'parameter name' isWhatsAppThen you can call it like this in the template:<p>WhatsApp：<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank">点击联系</a></p>Here, we use
https://wa.me/Prefix, assuming your WhatsApp parameter value is a phone number, this will generate a clickable WhatsApp chat link.
These{% contact ... %}Tags can be flexibly placed in any template file of the website, whether it's the header, footer, sidebar, or an independent 'Contact Us' page.This design ensures that your contact information remains highly consistent, and after a single update in the background, the entire site can be synchronized refreshed, greatly enhancing operational efficiency and ensuring the accuracy and timeliness of the information.
Through the intuitive backend settings and powerful template tag system provided by AnQiCMS, dynamically managing and displaying the contact information on the website has become easier than ever.It not only reduces the麻烦 and risk of error in manual code modification, but also gives you complete control over the display of website content, making your website operation more efficient and flexible.
Common Questions (FAQ)
1. I added a new contact method (such as: Telegram link) in the 'Contact Settings' on the backend, but it didn't display on the website frontend. What could be the reason for this?
This is usually because you haven't added the corresponding tag to call it in the website template files. The 'Contact Information Settings' on the backend only stores the information, and you still need to add it to the template (e.g., the footer template)partial/footer.htmlOr contact us on the contact pagepage/contact.html), use{% contact with name="您自定义的参数名" %}Such