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 that allows you to easily customize and flexibly display this information at any location on the website.

Next, we will explain in two main steps how to customize contact information parameters in AnqiCMS and how to display them in templates.

One, Set custom contact information parameters in the AnqiCMS backend

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

  1. Go to the contact information settings pageAfter logging into the backend management interface, find the 'Backend 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 contact person, contact phone number, contact address, contact email, 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 method parameters.Below the "Contact Information Settings" page, you will find a section named "Custom Settings Parameters".

    • Click the "Add" button next to the area.
    • First, fill in the input box that pops upParameter nameThis 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 follow the camel case naming convention.(For example:)WhatsApp/XiaoHongShuThis will keep the code规范性 and facilitate subsequent maintenance. Even if you input Chinese, the system will automatically convert it to camelCase naming.
    • Inparameter valuePlease fill in the actual content of this contact information. For example, if you set the parameter nameWhatsApp, then you can fill in your WhatsApp phone number.
    • [en] NoteThe field can be used to briefly describe the purpose of this custom parameter, making it convenient for you and other administrators to view and manage it in the future.
    • After filling out, click the 'Save' button.

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

Secondly, call to display 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. UnderstandcontacttagsAnqiCMS provides a dedicated function for calling contact information.contactThis tag 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 (usuallytemplatethe directory..htmlheaderpartial/header.html, footerpartial/footer.htmlOr contact us on the contact 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, simply write it like this in the template: 

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

    If you wish to store the value obtained into 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>

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

  3. Dial the built-in contact methodFor 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 as Cellphone/Email/Address).

Through these two steps, you can flexibly add and display various contact methods in AnqiCMS.This high degree of customizability enables your website to better meet various business needs and communication habits of users.

Common Questions (FAQ)

1. How can I call my custom parameter name in the template if I use Chinese characters?

Answer: Although AnqiCMS backend allows you to input Chinese parameter names, the system will automatically convert them to camel case English (or pinyin) form internally. For example, if you input '联系方式', it may be processed asLianXiFangShiTo avoid confusion and ensure accurate invocation,.It is strongly recommended that you use English or pinyin camel case directly when setting parameter names.for exampleWeChatOfficialAccountorCustomerServiceEmailSo that you can use it directly in the template.{% contact with name="WeChatOfficialAccount" %}.

Why is it that I have set a custom contact method in the background, but it does not display in the front-end template?

Answer: This is usually due to several reasons. First, please check the template incontactTagsnameIs the parameter value exactly matching the 'parameter name' you entered in the 'Custom Parameter Settings' on the backend, including case sensitivity.Secondly, make sure you clicked the 'Save' button after making changes in the background.Finally, AnqiCMS will have a caching mechanism. Please try to find 'Clear Cache' in the left navigation bar of the background management interface and click it. After clearing the website cache, refresh the front-end page to view the effect.

3. Can I set a custom parameter to an image (such as another QR code)?

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