It is crucial to clearly display contact information when building and operating a website, as it is essential for establishing user trust and providing customer support.AnQiCMS as an efficient content management system provides an intuitive way to manage and display this key information, whether it is traditional phone, email, or modern social media links, it can be easily realized.
One, background configuration:统一 manage your contact information
AnQiCMS has designed a centralized area, allowing 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.“Background Settings”and then clickthe "Contact Information Settings".
On this page, you will see a series of preset contact information fields, which are commonly used in website operations:
- Contact: It is usually used for external titles, such as 'Mr. Wang.'
- Contact phone number: A phone number that is convenient for users to dial directly.
- Contact address: Display your company or service location.
- Contact email: The email address for receiving user emails.
- WeChat IDandWeChat QR code: Convenient for users to add WeChat contact.
- QQ: Traditional instant messaging mode.
In addition, AnQiCMS also preset link fields for mainstream social media platforms such asFacebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, YoutubeFill in your social media homepage link as required.
Custom contact informationThe strength of AnQiCMS also lies in its high flexibility. If the preset fields cannot fully meet your personalized needs, for example, if you want to add a WhatsApp contact method or other unique contact channels, AnQiCMS allows you toCustom new setting item.
At the bottom of the "Contact Information Settings" page, you can find the "Custom Setting Parameters" area. Here, you can:
- Parameter NameThis is the name provided for the template, it is recommended to use English, for example 'WhatsApp'. The system will automatically process it into camel case.
- Parameter valuePlease fill in actual contact information, such as your WhatsApp number.
- NoteAdd a brief description for this custom parameter for your or team members to understand its purpose.
In this way, you can expand and update the contact channels of the website at any time 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 how to elegantly display these data on the front page of your website. AnQiCMS provides a very convenient template tag -contact.
contactThe core of tags lies in itsnameAttribute, you use it to specify the specific contact information field you want to retrieve. Below are some common contact method examples that you can embed in 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 present them as<img>label'ssrcattribute values:
<!-- 显示微信二维码图片 -->
<img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 100px; height: 100px;">
4. Custom Contact InformationIf you have added custom parameters in the background, such as "WhatsApp", you can also use them throughcontacttag to call:
<!-- 显示自定义的WhatsApp联系方式 -->
<span>WhatsApp联系：{% contact with name="WhatsApp" %}</span>
Tip: Assign data to variablesIf you need to use the same contact information in multiple places in the template, or 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>
Calling in a multi-site environmentFor users who manage multiple sites through AnQiCMS,contactTags also supportsiteIdparameter. This means you can call the contact information of another site in a template of a site, just by specifying the correspondingsiteIdand it is done:
<!-- 调用站点ID为2的联系电话 -->
<span>站点2电话：{% contact with name="Cellphone" siteId="2" %}</span>
Chapter 3: Optimization and Precautions
- Maintain consistency of information: AnQiCMS centralized contact information management, greatly simplifies the update process.Any contact information change only requires one-time modification in the background, and all calls to the label on the front end will be automatically updated, avoiding inconsistencies in information.
- Enhancing user experience: Set phone numbers, email addresses, and other links as clickable (such as
tel:andmailto:Protocol can significantly enhance the user experience on mobile devices, allowing them to quickly initiate contact. - Beneficial for SEO: Clear and easily accessible contact information, also very beneficial for search engine optimization (SEO).Search engines will recognize this information, which helps improve the visibility of the website in local search results.
- Design integrationMake sure to integrate this contact information into the appropriate locations of 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 to ensure everything works properly.
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 help the success of website operation.
Frequently Asked Questions (FAQ)
1. I changed the contact information in the background, but the front page did not update immediately, why is that?This is usually caused by the cache mechanism of AnQiCMS.To improve the website loading speed, the system will cache some data.After you modify the background settings, you may need to manually clear the cache to make the front end effective immediately.You can find it in the left navigation bar of the AnQiCMS backend“Update Cache”Option, click it to clear the website cache.
2. Besides phone and email, what social media links does AnQiCMS support? How can you add more social media platforms not listed here?AnQiCMS supports default 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 methods, you can useThe 'Contact Information Settings' page has the 'Custom Setting Parameters' feature at the bottom. Just add a new custom parameter, enter its name (such as "SnapchatLink"), the corresponding value (your Snapchat link), and notes, then use it in the template through{% contact with name="SnapchatLink" %}Call the tag to invoke it.
3. How to make the phone number clickable and dial directly on mobile?In the template, you can use HTML'stel:An agreement is used to implement this feature. For example, after you get the phone number:
{% contact phoneNumber with name="Cellphone" %}
<a href="tel:{{ phoneNumber }}">点击拨打：{{ phoneNumber }}</a>
Then, click this on a mobile device: