In website operation, clearly and effectively displaying contact information is crucial for user experience and business conversion.AnQiCMS (AnQiCMS) provides us with flexible and powerful features, allowing us to easily obtain and display these key information in templates.
Backend configuration: the source of contact information
In the Auto CMS, all website contact information is centrally managed in the background.This means that whether you need to modify the contact phone number, email, or add a social media link, you do not need to touch any code, just a simple operation in the background is needed.
First, please log in to your security CMS backend. In the left navigation menu, find and click "Backend Settings
The strength of Anqi CMS lies in its high customizability.If you find that the default fields are not enough to meet your needs, such as if you want to additionally display your company's QQ number, WhatsApp link, or even TikTok account, you can easily add them through the 'Custom Settings Parameters' feature on the page.
Click the 'Add button' next to 'Custom setting parameters', you need to fill in three key pieces of information:
- Parameter nameThis is the unique identifier for template use.Suggest using English, as this will be more standardized in template code.
WhatsApp。The system will automatically convert it to camel case naming (i.e., each word starts with an uppercase letter, for examplecontactWechat)，but when calling it, you only need to use the name you set. - parameter valueThis is the specific content of the contact information, such as your WhatsApp account or link.
- [en] NoteThis is just to help you identify the purpose of this parameter in the background, and it will not be displayed on the front end.
After adding custom parameters, remember to click save, so all the contact information is configured and becomes the information source for our template calls.
Front-end template: Flexible retrieval and display of contact information
After the background data is configured, the next step is to display these contact methods to the user in the front-end template. Anqi CMS provides a special tag ——contactLet this process become very simple.
contactThe basic usage of the tag is{% contact 变量名称 with name="字段名称" %}Here,nameThe parameter is the field name you configure in the "Contact Information Settings" on the backend (including default fields and custom fields).
Let's see how to use it with some specific examples:
Display contact phone numberEnglish: Assuming you want to display the company's contact phone number in the footer of the website or on the 'Contact Us' page. You can write it in the template like this:
<div> 联系电话：{% contact with name="Cellphone" %} </div>If you want to store the phone number in a temporary variable for multiple uses or other processing, you can do it like this:
{% contact phoneNum with name="Cellphone" %} <p>我们的客服热线：{{ phoneNum }}</p> <p>欢迎来电咨询：<a href="tel:{{ phoneNum }}">{{ phoneNum }}</a></p>Display the company address： Similarly, displaying the company address is also very direct:
<p>公司地址：{% contact with name="Address" %}</p>Display email address： Display the email and add an email link to it:
{% contact emailAddr with name="Email" %} <p>商务合作请联系：<a href="mailto:{{ emailAddr }}">{{ emailAddr }}</a></p>Call WeChat QR code： 如果后台上传了微信二维码图片，您可以使用English
Qrcodethe field to display it:<div class="wechat-qrcode"> <img src="{% contact with name="Qrcode" %}" alt="微信二维码" /> <p>扫码添加微信</p> </div>Call custom contact information： 如果您在后台自定义了一个名为English
WhatsAppThe field, and in which you have filled in the WhatsApp account. In the template, you can call it like this:<p>WhatsApp联系：{% contact with name="WhatsApp" %}</p>Make sure that
nameThe value of the parameter should be consistent with the "parameter name" you filled in the "Custom Setting Parameter" under "Contact Information Settings" in the background.
Contact information call in a multi-site environment：
If you are managing multiple sites in the AnQi CMS and want to call contact information from other sites in the current site template,contacttags support ansiteIdParameters. You can obtain contact information by specifying the ID of another site. For example, to get the phone number of a site with ID 2:
{% contact otherSitePhone with name="Cellphone" siteId="2" %}}
<p>兄弟站点电话：{{ otherSitePhone }}</p>
However, in most cases, if you are only displaying your contact information in the template of the current site, this parameter usually does not need to be filled in.
Combine these calling methods, and you can easily build a complete contact information area, for example, in the footer of a website:
<footer>
<div class="contact-info">
<h3>联系我们</h3>
<p>地址：{% contact with name="Address" %}</p>
<p>电话：{% contact with name="Cellphone" %}</p>
<p>邮箱：{% contact with name="Email" %}</p>
{% contact whatsappAccount with name="WhatsApp" %}
{% if whatsappAccount %}
<p>WhatsApp: {{ whatsappAccount }}</p>
{% endif %}
{% contact wechatQrCode with name="Qrcode" %}
{% if wechatQrCode %}
<div class="wechat-qr">
<img src="{{ wechatQrCode }}" alt="微信二维码" />
<p>微信扫一扫</p>
</div>
{% endif %}
</div>
</footer>
This way, the contact information on your website is managed uniformly and updated easily, greatly improving the maintenance efficiency of the website.
Common Questions (FAQ)
Q1: I have set the contact information in the background, but it does not display in the front-end template. What is the matter?A1: If you have set the contact information in the background but it is not displayed on the front end, please check the following aspects:
- Is the template code correct?Confirm whether you have used it in the corresponding template file
{% contact ... %}labels, andnameThe field name specified by the parameter is completely consistent with the backend settings (note the case). - Is the template file appliedCheck if your website is using template files that call code containing these contact methods. Sometimes, a template may have been changed, but the new template does not have corresponding code.
- Cache issuesIn some cases, browser caching or AnQiCMS's own caching may cause information not to be updated in a timely manner.Try clearing the browser cache and clicking the 'Update Cache' feature in the AnQiCMS backend.
- Has the information been saved?Make sure you have filled in the information in the background "Contact Information Settings" and clicked the "Save" button at the bottom of the page.
Q2: I want to display some unconventional contact methods on the website, such as specific department phone numbers or overseas social media accounts, but there are no default fields in the backend. How can I add them?A2: SecureCMS provides a flexible "custom setting parameter" feature to solve this problem.In the "Background Settings" -> "Contact Information Settings" page, find the "Custom Settings Parameters" area, and click the add button.Here, you can create new contact fields for your specific needs.SalesPhone(Sales Phone) orFacebookPage(Facebook Page), and fill in the corresponding "parameter value." Save it, and it can be used in the template.{% contact with name="SalesPhone" %}or{% contact with name="FacebookPage" %}to call it.
Q3: If I am managing multiple sites in AnQiCMS, how can I ensure that each site displays its own contact information independently rather than getting mixed up together?A3: The multi-site feature of A3: Safe CMS is independent in the management of contact information.When you configure information in the "Contact Information Settings" on each site's backend, this information is unique to that site.contactLabels will automatically obtain the contact information of the current site. If you really need to call the contact information of *another specified site* in the template of a particular site (this situation is rare), you can usesiteIdparameters, such as{% contact with name="Cellphone" siteId="其他站点ID" %}. Usually, you do not need to specify extra for each sitesiteId, the system will intelligently display the corresponding contact information based on the site currently being visited.