How to configure and display the contact information of the website (such as phone, email, WeChat) in AnQiCMS?

The contact information of the website is a crucial bridge for building trust with users, providing support, and promoting communication.Whether it is to provide consultation, solve problems, or promote cooperation, clear and easy-to-find contact information can greatly enhance user experience and the professionalism of the website.In AnQiCMS, configuring and displaying this information is an intuitive and flexible operation.

Configure your website contact information in the background

To manage the contact information of the website in AnQiCMS, you can easily set it up through the backend.First, log in to your AnQiCMS backend management interface.In the left navigation bar, you will find the "Backend Settings

After entering the "Contact Information Settings" page, you will see some preset fields. These are commonly used contact information types on the website, such as:

  • Contact:Generally used to display a name for external contact, such as 'Mr. Wang' or 'Customer Service Department.'
  • Contact phone number:The primary phone number you want users to call.
  • Contact address:Your company or entity address, convenient for users to understand your geographical location.
  • Contact email:The email address through which users can communicate with you.
  • 微信号：EnglishYour enterprise or personal WeChat ID, convenient for users to add.
  • WeChat QR Code:Upload your WeChat QR code image, and users can scan it to add you.

You can directly enter the corresponding information in these fields. Once saved, this information will be immediately available on the front end of your website.

Flexible custom settings

In addition to these default contact methods, AnQiCMS also provides a "Custom Setting Parameters" feature for various personalized needs.This means that if your website needs to display contact information other than default fields, such as WhatsApp, Facebook homepage link, or other specific social media accounts, you can add them yourself.

To add a custom contact method, you need to set three key pieces of information:

  • Parameter name:This is the identifier for the information you call this in the template.Suggestion to use English, as template tags are case-sensitive, for example “WhatsApp” or “FacebookLink”.
  • Parameter value:The actual contact information content, such as your WhatsApp number or Facebook homepage URL.
  • Note:This is an internal description field, used to help you remember the purpose of this custom parameter, it will not be displayed on the front end.

For example, if you want to add a WhatsApp contact, you can fill in "WhatsApp" in the parameter name, enter your WhatsApp number in the parameter value, and write "international business contact information" in the remarks.Thus, you have added a new custom contact channel to the website.

Front-end template calls and displays contact information

后台配置完成后，下一步就是在您的网站前台模板中显示这些联系信息了。AnQiCMS提供了一个名为 EnglishcontactThe template tag makes this process simple and intuitive.

contactThe basic usage of tags is{% contact 变量名称 with name="字段名称" %}.变量名称It is optional. If you do not specify, the tag will directly output the value of the field.nameThe parameter is the field name you set during the backend configuration.

The following are some examples of how common contact methods are called in the template:

  • Display contact phone number:

    <div>
    <span>联系电话：</span><a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a>
</div>

    Here, we use HTML'stel:Protocol, the user can make a phone call directly after clicking, improving the user experience.

  • Display the contact email:

    <div>
    <span>联系邮箱：</span><a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>
</div>

    Similarly,mailto:The protocol allows the user to directly launch the email client to send an email after clicking.

  • Display the WeChat ID:

    <div>
    <span>微信号：</span><span>{% contact with name="Wechat" %}</span>
</div>

  • Display the WeChat QR code:

    <div>
    <span>微信扫一扫：</span><img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
</div>

    Here you need to set the image address of the WeChat QR code assrcEmbed as an attribute<img>the tag.

  • Display custom WhatsApp information:If you have added a custom parameter named "WhatsApp" in the background, you can call it in the template like this:

    <div>
    <span>WhatsApp联系：</span><span>{% contact with name="WhatsApp" %}</span>
</div>

Points to note in a multi-site environment

AnQiCMS supports multi-site management, if you are operating multiple websites under the same system, and each website may require displaying different contact information, then you cancontactadd tags to itsiteIdThe parameter is used to specify the contact information of which site to call. For example:{% contact with name="Cellphone" siteId="2" %}This makes it clear and orderly to manage information in a multi-site environment.

Practice & Tips

  1. Unified display location:The website footer is usually the most common and convenient place to put contact information.You can also add a "Contact Us" link to the top navigation bar of the website, linking to a dedicated contact page.
  2. Create 'Contact Us' page:You can create an independent 'Contact Us' single page in the 'Page Resources' section of the AnQiCMS backend.On this page, you can display all contact methods, company maps, comment forms, and other information in detail, providing users with one-stop service.
  3. Keep information updated:Regularly check and update your contact information to ensure they are always accurate and effective. This is crucial for maintaining the professionalism of the website and the trust of users.
  4. Consider responsive design:Ensure that contact information is clearly and beautifully displayed on different devices (mobile, tablet, desktop), especially that phone numbers can be clicked to dial directly and email addresses can be clicked to send emails directly.

Through AnQiCMS's features, you can easily and efficiently manage and display your website's contact information, providing users with a convenient communication channel, thus enhancing the overall user experience and conversion rate of the website.

Common Questions (FAQ)

Q1: I have already configured the contact information, but it does not display on the website front-end. What's the matter? A1:Firstly, make sure you clicked the "Save" button on the "Contact Information Settings" page. Secondly, check if your website template files are using correctly.contactlabels, andnameThe parameter is exactly the same as the field name set in the background.Finally, since AnQiCMS may have cache, you can try to clear the website cache by using the 'Update Cache' feature in the backend, or clear the browser cache and then visit.

Q2: Can I add other social media contact information besides phone, email, and WeChat, such as Facebook or Twitter? A2:Of course, you can.The “Contact Settings” of AnQiCMS provides the function of “Custom Settings Parameters”.{% contact with name="Facebook" %}It was called and displayed.

Q3: If I need to display different phone numbers or email addresses on different pages of the website, can AnQiCMS achieve this? A3:AnQiCMS's “Contact Information Settings” is global, usually a set of contact information is applied to the entire website. If you really need to display unique contact information on a specific page, you can take the following strategies:

1.  **在页面内容中直接嵌入：** 如果只是少数几个页面的特殊需求，您可以在AnQiCMS的“页面管理”或“文档管理”中编辑该页面的内容，直接将特定的电话或邮箱文本嵌入到文章或单页面编辑器中。
2.  **使用单页面功能：** 创建一个专门的“联系我们”单页面，并在其中详细列出所有联系方式。对于需要特殊联系方式的页面，可以引导用户访问这个单页面，或在该页面内容中直接引用特殊联系方式。
3.  **模板逻辑判断（较复杂）：** 如果您熟悉模板开发，可以通过判断当前页面的URL或ID，在模板中使用`if`语句来动态显示不同的联系信息，但这需要更高级的模板定制能力。