How to integrate and display the custom contact information on the AnQiCMS frontend page, such as WhatsApp links?

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.Fortunately, AnQiCMS fully considered the flexibility of content and functions from the beginning of its design, allowing you to easily customize the contact information in the background and display it on the front page of the website.

This article will 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.

The first step: Set custom contact information in AnQiCMS background

The AnQiCMS backend management interface is designed very intuitively, all the basic information and contact details of the website are managed in one place.

First, please log in to your AnQiCMS background. Find and click on the menu item on the left side of the navigation menu. Backend settingsSelect thenContact information settings.

After entering the contact information setting page, you will see some default contact information fields, such as contacts, phone numbers, contact addresses, contact emails, and WeChat IDs.These are the information commonly used in our daily website operations.

Now, if your need is to add a WhatsApp contact method, and there is no default field, it's okay, AnQiCMS provides flexible customization functions. Scroll to the bottom of the page, and you will see a “Custom settings parametersThe area.

Here, you can click on theaddbutton to add a custom field.

  1. Parameter NameThis is the unique identifier for the front-end template. It is recommended to use English names for easy management and code cleanliness, such as 'WhatsApp'.The AnQiCMS system will automatically convert it to camel case naming, convenient for direct use in templates.
  2. Parameter valuePlease enter your WhatsApp contact information. You can choose to enter a pure WhatsApp number (including the country code, such as+8613800138000Or directly enter a complete WhatsApp chat link (for examplehttps://wa.me/8613800138000). If you want to start a chat directly on the front end, it is recommended to enter the complete link.
  3. NoteAdd a short description for this custom parameter, such as 'WhatsApp contact link', so you or your team can easily understand it in the future.

After filling out, please click the button at the bottom of the page "Save" button. This way, your WhatsApp contact information has been successfully added to the AnQiCMS backend settings.

Second step: Integrate WhatsApp contact information into the front-end template

Next, we will display the WhatsApp information set up on the backend to the front-end page of the website.AnQiCMS uses a syntax similar to the Django template engine, making it very easy for front-end developers to get started with template creation and content retrieval.

AnQiCMS template files are usually stored in/templatethe directory, and.htmlWith the suffix. You may want to place the WhatsApp link in the footer, sidebar, or a dedicated 'Contact Us' page on the website.For example, this part of the code is usually in the website footerpartial/footer.htmlor the main layout filebash.htmlis referenced.

AnQiCMS provides a namedcontactThe dedicated tag used to retrieve all the information from the background "Contact Settings" including your customized parameters.

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 the 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 the relevant 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 the "parameter value" filled in your background is a pure number, then we usehttps://wa.me/prefix andwhatsappInfoThe variable is concatenated to form a link that can directly jump to a WhatsApp chat. If the background is filled with the complete link, thenhref="{{ whatsappInfo }}"Just do it.
  • target="_blank" rel="noopener noreferrer"This is a recommended security practice,target="_blank"open links in a new window or new tab, whilerel="noopener noreferrer"which enhances security and prevents potentially malicious effects on the current page from the newly opened page.
  • <img src="..." alt="WhatsApp" ...>: You can insert the official WhatsApp icon or other styles according to your website design here to enhance the user experience. Remember to upload the icon file to/public/static/images/Accessible path.

Step 3: Preview and optimize.

After completing the modification of the template code, find the left navigation bar in the AnQiCMS background.Update CacheClick and make sure 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 methods, for example