How to add custom parameters in the contact information settings to meet specific information display requirements in the template?

During the process of setting up and operating a website, displaying contact information is often a crucial element.It is not only a bridge for visitors to communicate with you, but also a key factor in building trust and improving conversion rates.AutoCMS (AutoCMS) deeply understands this need, providing basic contact information settings while also granting users great flexibility, allowing you to customize and display various contact information according to your unique business needs.

This article will guide you to delve deeper into how to set custom contact information parameters in the AnQi CMS, to meet the specific information display needs of your website template.

Why do you need a custom contact method?

In the digital age, the contact channels of enterprises are far more than just phones and email addresses.Your business may need to display multiple contact channels other than traditional phone and email, such as a specific social media account link (such as Line ID, WhatsApp number), a dedicated customer service hotline for a particular region, contact information for different departments, or even cryptocurrency receiving addresses.The design philosophy of Anqi CMS is to provide highly customizable content management solutions. Its flexible content model and tag system are designed to meet these diverse needs.When the contact information field preset by the system cannot fully cover your business scenario, custom parameters become an indispensable tool for you.

Through custom parameters, you can ensure that the contact information displayed on the website's frontend always remains consistent with your actual operational strategy. No matter how your business develops, you can adjust and expand it quickly and conveniently without modifying the template code or seeking help from technicians.

In Anqi CMS backend, add custom parameters

Firstly, let's understand how to add these custom contact information parameters in the Anqi CMS backend management interface.

  1. Enter the contact information setting page:Log in to your CMS backend, find the "Backend Settings" menu in the left navigation bar.Click to expand and you will see the "Contact Information Settings" option, click it to enter the corresponding configuration page.

  2. Familiarize yourself with the existing fields and the "Custom Settings Parameters" area:After entering the contact information setting page, you will see some preset fields, such as contacts, phone number, contact address, contact email, and WeChat ID.These are the most commonly used basic information on the website.These default fields meet the needs of most websites.

    However, the real magic is in the "Custom Settings Parameters" area at the bottom of the page. This is where you create personalized contact information.

  3. Create a new custom parameter:In this area, you will see a button or similar entry labeled 'Add Custom Parameter'. Click it, and several input boxes will appear for you to fill in:

    • Parameter name:This is the 'name' that will be used when calling this information in the template. It is strongly recommended to use English letters and adopt camelCase naming method (for example:WhatsAppContact/ServiceHotline/LineID）。Even if you enter Chinese, the system usually converts it to a standard camel case automatically, but using English directly will be more intuitive and convenient.
    • Parameter value:Here you can fill in the specific content you want to display.This can be your WhatsApp number, a dedicated customer service hotline link, an email address of a special department, or any text content you need to display.
    • Note:This field is purely for your own management and memory convenience, for example, you can fill in "Overseas Users WhatsApp Contact Information

    For example, if your business is mainly aimed at overseas users, you need to provide a WhatsApp contact method, and you can fill in the "parameter name" here.WhatsAppIn the 'Parameter Value' field, enter your WhatsApp number.

  4. Save your settings:Don't forget to click the "Save" or "Confirm" button at the bottom of the page after you fill in the information, so that your custom parameters take effect.

Call custom parameters in the website template

After completing the background settings, the next step is how to display these customized information on the website front-end. The Anqi CMS template engine is similar to Django syntax, using{% 标签 %}Performing logical control,{{ 变量 }}Performing data output.

Anq CMS provides a very convenientcontactTags, specifically used to call contact information, whether it is a preset field or a custom parameter you just created.

Basic syntax for calling custom parameters:

{% contact 变量名 with name="您的自定义参数名" %}

Or, if you don't need to assign a value to an intermediate variable, you can output directly:

{% contact with name="您的自定义参数名" %}

Let's take the one previously set upWhatsAppAs an example of a parameter:

If you set the parameter name in the background to:WhatsAppThe parameter value is+8613800138000Then, on your website template (such as the footerfooter.htmlor the "Contact Us" pagecontact.html), you can call it like this:

<p>
    WhatsApp 联系我们：
    {% contact whatsappNumber with name="WhatsApp" %}
    <a href="https://wa.me/{{ whatsappNumber }}" target="_blank" rel="nofollow">{{ whatsappNumber }}</a>
</p>

Or, more succinctly:

<p>
    WhatsApp 联系我们：
    <a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">{% contact with name="WhatsApp" %}</a>
</p>

So, your website will dynamically display "WhatsApp Contact Us: +8613800138000", and clicking on the number will directly jump to the WhatsApp chat.

If the custom parameter is an image address (such as a WeChat QR code):

Assuming you have customized a parameter named in the backgroundWechatQrCodeImgThe parameter value is the link to the WeChat QR code image you uploaded to the Anqi CMS image library (such as:/uploads/2023/01/wechat_qrcode.webpIn the template, you can display it like this: 

<div class="wechat-qrcode">
    <p>微信扫码咨询：</p>
    <img src="{% contact with name="WechatQrCodeImg" %}" alt="微信二维码" />
</div>

Through this method, you can flexibly place custom parameters at the header, footer, contact us page, or even any article or product detail page where you need to display this information, greatly enhancing the richness and practicality of the website content.

Summary

The contact information customization feature of Anqi CMS cleverly combines the flexibility of background configuration with the ease of use of front-end templates.It allows website operators to easily expand and manage the contact information of the website, meeting various unique business needs without the need for in-depth complex code modifications.This high degree of customization is exactly the core value embodiment of AnQi CMS as an enterprise-level content management system, committed to helping small and medium-sized enterprises and content operation teams improve efficiency and reduce costs.

Common Questions (FAQ)

1. Can the 'parameter name' of custom parameters be in Chinese? What will happen if it is?Although when setting custom parameters in the Anqi CMS backend, the "parameter name" field can be entered in Chinese, the system will usually convert it to camel case English naming format automatically. We strongly recommend using English letters with clear meanings as parameter names (for example,ServiceHotlineInstead of客服热线This can avoid potential compatibility issues and make the template code clearer, easier to maintain, and understand.

2. How should I set up and call a custom contact method that is an image (such as a dedicated customer service QR code)?You can directly fill in the complete URL address of the picture in the 'Parameter Value' of custom parameters (for example, the link to the picture you upload to the AnQi CMS media library). When calling the template, just use the parameter value as<img>TagssrcThe attribute is okay, for example:<img src="{% contact with name="您的图片参数名" %}" alt="自定义二维码" />So, the image