In website operation, clearly displaying contact information is crucial for enhancing user experience and promoting business communication.Visitors hope to quickly find and contact you, whether it's for customer inquiries, seeking support, or business collaboration.AnQiCMS provides a convenient and efficient mechanism, allowing you to manage these contact information uniformly in the background, and dynamically display them in the website template without frequent code modifications, greatly improving the efficiency of website maintenance.
Contact Management in AnQiCMS
In AnQiCMS backend, the contact information settings are concentrated on the "Contact Information Settings" page under the "Backend Settings" menu.This JSON object provides a series of commonly used fields by default, including contact person, contact phone number, contact address, contact email, WeChat ID, WeChat QR code, and even QQ, WhatsApp, Facebook, and other international social media accounts.
Apart from these predefined fields, the strength of AnQiCMS lies in its ability to allow you to add "custom setting parameters" according to your actual business needs.This means that if you have special contact methods, such as a customer service ID for a specific platform, or if you want to display a contact channel by a different name, you can flexibly expand it.This information configured in the background can become a data source that can be referenced in your website template.
The core of obtaining contact information in the template{% contact %}tags
To dynamically display these contact methods in your website template, AnQiCMS provides a special{% contact %}tag. This tag usesnameparameters to specify the specific contact information you want to obtain.
Get phone number:If you want to display your contact phone number on the page, you can use
name="Cellphone". For example, you can output the phone number directly like this:<div>联系电话：{% contact with name="Cellphone" %}</div>To allow users to directly click to dial, you can embed this value into<a>Tagshrefthe attribute:<p>咨询热线：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>Display email address:The method to obtain the email address is similar to the phone number, using
name="Email".<div>联系邮箱：{% contact with name="Email" %}</div>Similarly, to facilitate user clicking to send an email, it can be combinedmailto:Protocol usage:{% contact userEmail with name="Email" %}<p>发送邮件至：<a href="mailto:{{ userEmail }}">{{ userEmail }}</a></p>Here we first assign the email address touserEmailthe variable, and then use it in the link to make the code clearer.Display WeChat Information:AnQiCMS supports displaying WeChat ID text and WeChat QR code. To display your WeChat ID text, you can use:
name="Wechat":<div>微信号：{% contact with name="Wechat" %}</div>If you need to display a WeChat QR code image on a page, you can usename="Qrcode". Usually, this value is used as<img>Tagssrcproperty:<img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 120px; height: 120px;" />So, the QR code image uploaded to your backend can be loaded and displayed correctly.
Handle custom contact information
The flexibility of AnQiCMS allows you to add custom contact methods according to your actual needs. Suppose you add a new custom parameter in the "Contact Information Settings" section of the backend, and set the "Parameter Name" toWhatsAppAnd you have filled in your WhatsApp account or link in the 'Parameter Value'. Then, in the template, you can directly use this custom parameter name to retrieve the corresponding value:<div>WhatsApp：{% contact with name="WhatsApp" %}</div>This allows you to easily display any background-defined, business-demand-compliant contact information on the website, whether it's a social media homepage link, an online customer service link, or other personalized contact methods.
Practice Scenarios and Techniques
These contact methods are usually placed in the footer of the website, top navigation bar, sidebar, or an independent 'Contact Us' page.When building these areas, you can combine HTML tags and CSS styles to make the information both beautiful and practical.
<footer>
<div class="container">
<p>版权所有 © {% now "2006" %} 您的公司名称.</p>
<p>地址：{% contact with name="Address" %}</p>
<p>电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
<p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
{% contact wechatAccount with name="Wechat" %}
{% if wechatAccount %}
<p>微信：{{ wechatAccount }}</p>
{% endif %}
</div>
</footer>
If your website supports multiple languages or has multiple site instances, and you need to call specific site contact information,{% contact %}tag.siteIdSpecify the site ID using parameters. But in most single-site scenarios, AnQiCMS will automatically identify the current site settings without additional specification.
Some reminders
When developing templates and managing content, there are several points to note.Firstly, please make sure that all the contact information that needs to be displayed has been filled in accurately and without error in the 'Contact Information Settings' section of the AnQiCMS backend.If the background data is empty, the template will not display any content naturally when called.nameThe field name in the parameter must be consistent with the field name defined in the AnQiCMS document or the backend (for example)CellphoneInsteadcellphone).
By mastering{% contact %}The use of tags, you can easily manage and display your contact information on the AnQiCMS website, providing users with a convenient communication channel, thus enhancing the professionalism and user-friendliness of the website.
Common Questions (FAQ)
Question: I used a label in the template, but no contact information is displayed on the page. What's the matter?
{% contact %}Is the spelling of the parameter correct, for example, should it be used?Answer: Please first check the AnQiCMS backend "Backend Settings" -> "Contact Information Settings" page to confirm whether you have filled in the corresponding contact information.If the background information is empty, the template will not be able to retrieve any content.nameIs the spelling of the parameter correct, for example, should it be used?name="Cellphone"Insteadname="cellphone"Because AnQiCMS template tags are case-sensitive.Question: Can I display multiple types of contact information on the same page at the same time? For example, phone number, email address, and WeChat QR code?Answer: Of course you can.
{% contact %}Tags can be used multiple times, each time specifying a different one.nameParameters can be used to obtain the corresponding contact information. You can call these tags individually at any location as needed according to the page layout, and combine them to display.Question: If I add a custom contact method, but don't know how to write the
nameparameter in the template?Answer: When you add a custom parameter in the "Contact Information SettingsnameThe value of the parameter. AnQiCMS usually processes it in camelCase, so even if you enter 'sales email' in the backend, the template should try to usename="SalesEmail"to call it.