Clearly displaying contact information is crucial for building user trust and providing customer support when building and operating a website.AnQiCMS as an efficient content management system provides an intuitive way to manage and display this key information, whether it's traditional phone, email, or modern social media links, all can be easily achieved.
【en】One, Backend Configuration: Centralize the management of your contact information
AnQiCMS has designed a centralized area that allows you to manage all website contact information in one place. To access this feature, you just need to log in to the backend and find it through the left navigation bar.“Backend Settings”, and then click.“Contact Information Settings”.
On this page, you will see a series of preset contact information fields, which are commonly used in website operations:
- Contact Person: Usually used for formal titles when addressing externally, such as 'Mr. Wang'.
- Phone Number：A phone number convenient for users to dial directly.
- Contact Address：Display your company or service location.
- Contact Email：The address to receive user emails.
- WeChat IDandWeChat QR Code: Convenient for users to add WeChat contact.
- QQ: Traditional instant messaging method.
In addition, AnQiCMS also preset the link fields for mainstream social media, such asFacebook, Twitter, TikTok, Pinterest, LinkedIn, Instagram, YouTubeAnd so on. You just need to fill in your social media homepage link in the corresponding field.
Custom contact informationThe strength of AnQiCMS also lies in its high flexibility. If the preset fields cannot fully meet your personalized needs, such as adding a WhatsApp contact method, or other unique contact channels, AnQiCMS allows youCustom a new setting item.
At the bottom of the "Contact Information Settings" page, you can find the "Custom Settings Parameters" area. Here, you can:
- Parameter nameThis is the name for template usage, it is recommended to use English, for example, 'WhatsApp'. The system will automatically process it into camel case.
- parameter valueEnter actual contact information, such as your WhatsApp number.
- [en] NoteAdd a brief description for this custom parameter for easy understanding by yourself or team members.
In this way, you can always expand and update the contact channels of the website according to business development or user preferences, ensuring the timeliness and accuracy of information release.
Second, front-end template call: easily display contact information
After configuring the contact information in the background, the next step is to elegantly display these data on the front page of your website. AnQiCMS provides a very convenient template tag ——contactLabel.
contactThe core of a tag lies in itsnameProperty, used to specify the specific contact information field to be retrieved. Below are some example calls of common contact methods, which you can embed into the HTML code according to your template structure:
1. Basic contact information (phone, email, address)This information is usually displayed in the header, footer, or 'Contact Us' page of the website:
<!-- 显示联系电话 -->
<span>联系电话：{% contact with name="Cellphone" %}</span>
<!-- 显示联系邮箱，并作为可点击的邮件链接 -->
<a href="mailto:{% contact with name="Email" %}">发送邮件：{% contact with name="Email" %}</a>
<!-- 显示联系地址 -->
<span>公司地址：{% contact with name="Address" %}</span>
2. Social media linksSocial media icons and links are standard features of modern websites:
<!-- Facebook 链接 -->
<a href="{% contact with name="Facebook" %}" target="_blank">访问我们的Facebook</a>
<!-- Twitter 链接 -->
<a href="{% contact with name="Twitter" %}" target="_blank">关注我们的Twitter</a>
<!-- 您也可以获取所有预设的社交媒体链接，并循环展示 -->
<!-- 注意：此功能需在后台的“联系方式设置”中配置“QQ”、“WhatsApp”等字段后才能正常调用 -->
<div class="social-links">
{% contact contactInfo %}
{% if contactInfo.QQ %}<a href="tencent://message/?uin={{ contactInfo.QQ }}&Site=&Menu=yes" target="_blank">QQ</a>{% endif %}
{% if contactInfo.WhatsApp %}<a href="https://wa.me/{{ contactInfo.WhatsApp }}" target="_blank">WhatsApp</a>{% endif %}
{% if contactInfo.Facebook %}<a href="{{ contactInfo.Facebook }}" target="_blank">Facebook</a>{% endif %}
<!-- ...以此类推，调用其他社交媒体字段 -->
{% endcontact %}
</div>
3. WeChat QR codeQR codes are usually displayed as images, so you need to include them as<img>Tagssrcattribute values:
<!-- 显示微信二维码图片 -->
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 100px; height: 100px;">
4. Custom Contact InformationIf you added a custom parameter in the background, such as “WhatsApp”, it can also be called throughcontacttags:
<!-- 显示自定义的WhatsApp联系方式 -->
<span>WhatsApp联系：{% contact with name="WhatsApp" %}</span>
Tip: Assign data to a variableIf you need to use the same contact information at multiple locations in a template, or if you want to perform some additional processing after obtaining it, you can assign it to a temporary variable to make the template code more concise:
{% contact phoneNumber with name="Cellphone" %}
<p>我们的电话是：{{ phoneNumber }}</p>
<a href="tel:{{ phoneNumber }}">立即拨打</a>
Call in a multi-site environmentFor users who manage multiple sites through AnQiCMS,contactTags also supportsiteIdParameters. This means that you can call the contact information of another site in a template of a site, just by specifying the correspondingsiteIdas follows:
<!-- 调用站点ID为2的联系电话 -->
<span>站点2电话：{% contact with name="Cellphone" siteId="2" %}</span>
III. Optimization and Precautions
- Maintain consistency of informationAnQiCMS centrally manages contact information, greatly simplifying the update process.Any changes to contact information only need to be modified once in the background, and all front-end calls to the tag will be automatically updated, avoiding issues of inconsistent information.
- Enhance user experienceSet phone numbers, email addresses, and other content as clickable links (such as
tel:andmailto:This can significantly improve the mobile user experience, allowing them to quickly initiate contact. - It is beneficial for SEOClear and easily accessible contact information, which is also very beneficial for search engine optimization (SEO).The search engine will recognize this information, which helps improve the visibility of the website in local search results.
- Design IntegrationPlease ensure that these contact details are integrated into suitable locations within the page design, such as the footer, navigation menu, sidebar, or a dedicated 'Contact Us' page, ensuring that the information is both prominent and aesthetically pleasing.
- Test availabilityBefore the website goes live, please make sure to test the display and click effects of these contact methods on different devices and browsers, ensuring everything works normally.
By using the above method, you can fully utilize the functions of AnQiCMS, efficiently manage and display the contact information of your website, provide users with a convenient communication channel, and contribute to the success of website operation.
Common Questions (FAQ)
1. I have modified the contact information in the background, but the front-end page did not update immediately, why is that?This is usually caused by the caching mechanism of AnQiCMS.To improve the website loading speed, the system will cache some data.When you modify the background settings, you may need to manually clear the cache to make the front-end effective immediately.Update CacheOptions, click it to clear the website cache.
2. Besides phone and email, what social media links does AnQiCMS support? How to add more social media not listed here?AnQiCMS supports mainstream social media links such as Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, etc. If you need to add social media that are not in the default list, or any other custom contact method, you can useContact Information Settings page bottom Custom Setting Parameters featureJust add a new custom parameter, input its name (such as "SnapchatLink"), the corresponding value (your Snapchat link), and a remark, then use it in the template.{% contact with name="SnapchatLink" %}Call the label by using it.
How to make the phone number clickable and directly dialable on mobile?In the template, you can use HTML'stel:Implement this function through the protocol. For example, when you get the phone number:
{% contact phoneNumber with name="Cellphone" %}
<a href="tel:{{ phoneNumber }}">点击拨打：{{ phoneNumber }}</a>
So, when you click on this in a mobile device: