On AnQiCMS, we often need to allow visitors to contact us in the most convenient way, and WhatsApp, due to its widespread usage, has become the preferred contact tool for many businesses and individuals.It is fortunate that AnQiCMS took full consideration of content and feature flexibility from the beginning of its design, allowing you to easily customize contact information in the backend and display it on the website's frontend pages.
This article will introduce in detail how to add and manage custom contact methods like WhatsApp in the AnQiCMS backend, as well as how to elegantly integrate and display them in the frontend template.
Step 1: Set custom contact information in the AnQiCMS admin panel
The backend management interface of AnQiCMS is designed to be very intuitive, with all the basic information and contact details of the website centralized for management.
First, please log in to your AnQiCMS backend. In the left navigation menu, find and click on theBackend settings" option, then select "Contact information settings.
After entering the contact information setting page, you will see some default contact information fields, such as contact person, contact phone number, contact address, contact email, and WeChat ID, etc.These are the common information we use in our daily website operations.
Now, if your requirement is to add a WhatsApp contact method and there is no default field for it, no problem, AnQiCMS provides flexible custom functionality. Scroll to the bottom of the page, and you will see a "Customize settings parametersThe area 【en】：
Here, you can click on the button 【en】：Addto add a new custom field 【en】：
- Parameter nameThis is the unique identifier used for the front-end template.For ease of management and to maintain code neatness, it is recommended to use English names, such as 'WhatsApp'.The AnQiCMS system will automatically convert it to camel case naming, making it convenient for you to call directly in the template.
- parameter valuePlease fill in your WhatsApp contact information here. You can choose to fill in the WhatsApp number only (including the country code, for example)
+8613800138000），or directly fill in a complete WhatsApp chat link (e.g.,https://wa.me/8613800138000）。If you want to initiate a chat directly by clicking on the front end, it is recommended to fill in the complete link. - [en] NoteAdd a short description for this custom parameter, such as 'WhatsApp contact link', so that you or your team can easily understand it when reviewing and maintaining it in the future.
Completed after filling in, please click the "" at the bottom of the pageSavebutton. This way, your WhatsApp contact information has been successfully added to the AnQiCMS backend settings.
Step 2: Integrate WhatsApp contact information into the frontend template
Next, we will display the WhatsApp messages set up on the backend to the frontend page of the website.AnQiCMS uses syntax similar to Django template engine, making it very easy for front-end developers to get started with template creation and content calls.
AnQiCMS template files are usually stored in/templatedirectory, and named with.htmlfor suffix.You may want to place the WhatsApp link on the footer of the website, in the sidebar, or on a dedicated "Contact Us" page.partial/footer.htmlor the main layout filebash.htmlwhere it is referenced.
AnQiCMS provides a namedcontactA dedicated tag used to retrieve all information from the 'Contact Information Settings' on the backend, including any custom parameters you have set.
To display the WhatsApp message you added, you can use the following code snippet:
{# 获取后台自定义的WhatsApp联系方式的值 #}
{% contact whatsappInfo with name="WhatsApp" %}
{# 判断是否获取到值，避免空内容显示 #}
{% if whatsappInfo %}
<div class="contact-item whatsapp-link">
{# 如果后台存的是纯数字，这里需要拼接成完整的WhatsApp链接 #}
{# 假设后台存的是纯数字，如：8613800138000 #}
<a href="https://wa.me/{{ whatsappInfo }}" target="_blank" rel="noopener noreferrer">
{# 您可以在这里放置一个WhatsApp图标，路径示例：/public/static/images/whatsapp-icon.png #}
<img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp" style="height: 20px; vertical-align: middle; margin-right: 5px;">
<span>联系WhatsApp: {{ whatsappInfo }}</span>
</a>
</div>
{% endif %}
Code analysis:
{% contact whatsappInfo with name="WhatsApp" %}This line of code is crucial. It tells AnQiCMS to look for a parameter named "WhatsApp" in the "Contact Information Settings" and assign its value to a variable namedwhatsappInfo.{% if whatsappInfo %}This is a conditional judgment to ensure that the front-end only displays related content when the back-end has indeed set the WhatsApp information, to avoid unnecessary blank spaces or errors on the page.<a href="https://wa.me/{{ whatsappInfo }}" ...>This will generate a clickable WhatsApp chat link. If your backend 'parameter value' is filled with pure numbers, then we usehttps://wa.me/prefix andwhatsappInfoVariables are concatenated to form a direct link to a WhatsApp chat. If the backend fills in the complete link,href="{{ whatsappInfo }}".target="_blank" rel="noopener noreferrer"This is a recommended safety practice.target="_blank"Open links in a new window or tab.rel="noopener noreferrer"This enhances security and prevents the newly opened page from potentially maliciously affecting the current page.<img src="..." alt="WhatsApp" ...>You can insert the official WhatsApp icon or other styles here according to your website design to enhance user experience. Remember to upload the icon file to/public/static/images/Below the accessible path.
Step 3: Preview and optimize
After completing the modification of the template code, find the " in the left navigation bar of the AnQiCMS backend.Update the cacheClick and ensure that your latest template changes take effect immediately. Then, you can refresh the front page to view the effects.
You can also use CSS styles to further beautify the display of WhatsApp contact information, for example