In today's digital age, allowing customers to easily find and contact you is the foundation of any successful website.Whether it is to provide customer support, promote sales, or build community interaction, clear and visible contact information is crucial.幸运的是，安企CMS提供了一套直观而强大的功能，让您能够轻松地在网站前台展示各类自定义联系方式，比如WhatsApp或Facebook链接，确保您的客户总能便捷地与您沟通。
Next, we will step by step introduce how to achieve this goal in the safety CMS.
Step 1: Backend Configuration - The 'headquarters' of contact information
Firstly, we need to enter the backstage management interface of the Anqi CMS, find the "Backstage SettingsThis is the core area where you manage all the external contact methods for your websites.
Here, you will see a series of preset contact information fields, such as contact person, contact phone number, contact address, contact email, WeChat ID, WeChat QR code, etc.The auto translation is: Englishhttps://wa.me/您的WhatsApp号码Enter a URL or Facebook profile page.
If your needs are more specific, or you want to add a contact method not in the default list, such as a special online customer service link, or you want to display a social media link with a different name, the "Custom Setting Parameters" feature can come in handy. Just click "Add Custom Parameter", enter an easily recognizable "parameter name" (such asMyCustomChat），as well as the "parameter valueThis 'parameter name' is the key to calling this information in your website template later.
Complete the information entry, click save, and your contact information will be securely stored in the system.
Step 2: Front-end Display - Make information accessible at your fingertips.
Configure contact information first, and then display them at a suitable position on the website front page.The Anqi CMS adopts syntax similar to Django template engine, allowing you to easily present this information to visitors with concise template tags.
The core of displaying contact information is to usecontacttags. This tag allows you to call the corresponding value based on the "parameter name" set in the background.
1. Show built-in WhatsApp or Facebook links
假设您已经在后台的“联系方式设置”中，为“WhatsApp”和“Facebook”字段分别填入了完整的链接地址。现在，您想在网站的页脚或侧边栏展示这些链接，可以这样编写模板代码：
{# 在后台的“WhatsApp”字段填写：https://wa.me/1234567890 #}
{# 在后台的“Facebook”字段填写：https://www.facebook.com/yourpage #}
<div>
<a href="{% contact with name='WhatsApp' %}" target="_blank" rel="noopener noreferrer">
<img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp">
<span>通过WhatsApp联系我们</span>
</a>
</div>
<div>
<a href="{% contact with name='Facebook' %}" target="_blank" rel="noopener noreferrer">
<img src="/public/static/images/facebook-icon.png" alt="Facebook">
<span>访问我们的Facebook主页</span>
</a>
</div>
Please note,imgthe tag insrcThe path needs to be adjusted according to the actual location where the icons are stored.target="_blank" rel="noopener noreferrer"It is a good practice in web development to open links in a new window and enhance security.
2. Show custom contact information
If you have created a named account in the background beforeOnlineChatLinkThe custom parameter, and you can fill in your online customer service link here, and you can call it like this:
{# 假设您在后台自定义参数中设置了：参数名=OnlineChatLink，参数值=https://chat.example.com/ #}
<div>
<a href="{% contact with name='OnlineChatLink' %}" target="_blank" rel="noopener noreferrer">
<img src="/public/static/images/chat-icon.png" alt="在线客服">
<span>在线咨询</span>
</a>
</div>
3. The location to place the template code
These code snippets can be placed in multiple key positions on the website. The most common ones are in the global page header (usually correspondingheader.htmltemplate files) or the page footer (usually correspondingfooter.htmlTemplate file) to ensure that each page can be displayed.
For independent pages such as "Contact Uspage/detail.html）in English.
To maintain the template structure clear and easy to maintain, you can encapsulate these contact information code snippets in./templateIn the directory of some custom template file, for example, create onepartial/contact-info.htmlfiles, then{% include "partial/contact-info.html" %}the way in the place where it is needed.
Summary
Through the intuitive backend settings and flexible template tags of the AQ CMS, displaying custom contact information becomes extremely simple. Whether you want to add popular social media links or need to customize contact entries for specific needs, An