How to customize contact information parameters in AnqiCMS and call them to display in the template?

It is crucial to maintain smooth communication with users in website operation.In addition to traditional contact methods such as phone and email, we often need to display more personalized social media or instant messaging information.AnqiCMS provides a very flexible contact information management module, allowing you to easily customize and flexibly display this information at any location on the website.

Next, we will divide it into two main steps and explain in detail how to customize contact information parameters in AnqiCMS and call them to display in the template.

One, set custom contact information parameters in the AnqiCMS backend

The AnqiCMS backend management system allows you to easily manage the various settings of the website. To customize the contact information, you need to log in to the backend first.

  1. Go to the contact information settings pageAfter logging into the background management interface, find the "Background Settings" menu item in the left navigation bar.Click to expand and select "Contact Information Settings". You will see a page containing default contact information (such as contacts, phone numbers, addresses, email addresses, WeChat ID, WeChat QR code, etc.).

  2. Create a new custom parameterIf these built-in options do not meet your needs, AnqiCMS allows you to create custom contact information parameters.Below the "Contact Settings" page, you will find a section named "Custom Setting Parameters."}

    • Click the 'Add' button next to the area.
    • In the pop-up input box, fill in firstParameter Name. This parameter name is the identifier you will use when calling this custom contact method in the template.It is strongly recommended to use English or pinyin, and adopt camel case naming conventions.for example:WhatsApp/XiaoHongShuThis can maintain the规范性 of the code and facilitate subsequent maintenance. Even if you input Chinese, the system will automatically convert it to camelCase naming.
    • InParameter valueEnter the actual content of this contact information. For example, if you set the parameter nameWhatsAppthen the parameter value can be your WhatsApp phone number.
    • NoteThe field can be used to briefly describe the purpose of this custom parameter, which is convenient for you and other administrators to view and manage in the future.
    • After filling in, click the "Save" button.

After completing these steps, you have successfully added a custom contact method parameter in the AnqiCMS backend. For example, we added a namedWhatsAppThe parameter has been filled in with your WhatsApp number.

Secondly, call the display of custom parameters in the template.

After the background parameter settings are completed, the next step is to display this information on your website front-end.AnqiCMS provides simple and intuitive template tags, allowing you to call these contact methods anywhere on the website.

  1. UnderstandcontactTag： AnqiCMS provides a special purpose for calling contact informationcontactLabel. This label is the key to obtaining all contact information (including built-in and custom) in your template.

  2. Invoke custom parameters: In your website template file (usuallytemplateUnder the directory.htmlfile, such as the headerpartial/header.html, footerpartial/footer.htmlor contact us pagepage/contact.html) you can use the following syntax to call the custom contact method:

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

    For example, to call the custom contact method we just set up in the background:WhatsAppContact information, just write it like this in the template:

    <div>我的WhatsApp：{% contact with name="WhatsApp" %}</div>

    If you wish to store the retrieved value in a variable for further processing or for multiple references in a template, you can do it like this:

    {% contact myWhatsApp with name="WhatsApp" %}
<p>立即联系我们，WhatsApp 号码：<a href="https://wa.me/{{ myWhatsApp }}" target="_blank">{{ myWhatsApp }}</a></p>

    In this way, you can not only display the number, but also directly build a WhatsApp chat link.

  3. Call built-in contact method Built-in contact methods can also be called in the same way. For example, to display the contact phone number and email address of the website: 

    <p>联系电话：{% contact with name="Cellphone" %}</p>
<p>联系邮箱：{% contact with name="Email" %}</p>

    Please notenameThe value of the parameter must match the predefined field names of AnqiCMS (such asCellphone/Email/Addressetc).

By following these two steps, you can flexibly add and display various contact methods in AnqiCMS.This high level of customization enables your website to better meet different business needs and communication habits of users.

Frequently Asked Questions (FAQ)

1. How do I call a custom parameter name in the template if I use Chinese?

Answer: Although the AnqiCMS backend allows you to enter Chinese parameter names, the system will automatically convert them to camel case English (or pinyin) form internally. For example, if you enter "contact information", it may be processed asLianXiFangShiIn order to avoid confusion and ensure accurate calls,It is strongly recommended that you use English or Pinyin camel case directly when setting parameter namesFor exampleWeChatOfficialAccountorCustomerServiceEmailSo that it can be used directly in the template{% contact with name="WeChatOfficialAccount" %}Just do it.

2. Why is the custom contact information I set in the background not displayed in the front-end template?

Answer: This usually has several reasons. First, please check the template incontactlabel'snameIs the parameter value exactly matching the parameter name you filled in the "Custom Setting Parameters" in the background, including case sensitivity.Secondly, please make sure you clicked the "Save" button after making changes in the background.Finally, AnqiCMS will have a caching mechanism, please try to find "Update Cache" in the left navigation bar of the backend management interface and click on it, clear the website cache and refresh the front page to view the effect.

Can I set a custom parameter to an image (like another QR code)?

Of course you can. You can directly fill in the complete URL address of the image in the "Parameter Value" of the custom parameter. Then, when calling the template, combine it with HTML's<img>Label to display it. For example, if you set a parameter namedAnotherQrcode, the parameter value ishttp://yourdomain.com/uploads/images/another_qrcode.pngyou can call it like this in the template:<img src="{% contact with name="AnotherQrcode" %}" alt="自定义二维码" />This allows you to flexibly add various images as a supplement to contact information.