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 the key bridge to establish trust, provide support, and promote communication with users.Whether it is to provide consultation, solve problems, or promote cooperation, clear and easily accessible 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.

Backend configures your website contact information

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 admin interface.In the left navigation bar, you will find the 'Background Settings' option, clicking on which will expand more sub-menus, including 'Contact Information Settings'.

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

  • Contact:Used to display a name used for external contact, such as "Mr. Wang" or the Customer Service Department.
  • Contact Phone:The main 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.
  • WeChat ID:Your 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 can directly enter the corresponding information in these fields. This information will be immediately available on the front end of your website once saved.

Flexible custom settings

In addition to these default contact methods, AnQiCMS also provides a very thoughtful "Custom Setting Parameter" feature to meet various personalized needs.This means that if your website needs to display contact information other than the default fields, such as WhatsApp, Facebook home page links, 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 you call this information in the template. It is recommended to use English, as template tags are case-sensitive, for example, 'WhatsApp' or 'FacebookLink'.
  • Parameter value:Actual contact information, 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 enter "WhatsApp" in the parameter name, enter your WhatsApp number in the parameter value, and write "International business contact" in the remarks.This is how you have added a new custom contact channel to the website.

Front-end template calls and displays contact information

After the background configuration is completed, the next step is to display this contact information on your website's front-end template. AnQiCMS provides a name calledcontactThe template tag makes this process simple and intuitive.

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

Here are some common contact methods used in templates:

  • 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, after the user clicks, they can directly make a phone call, enhancing the user experience.

  • Display 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 click to directly launch the email client and send an email.

  • Display WeChat ID:

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

  • Display WeChat QR code:

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

    Here, the image address of the WeChat QR code needs to be taken assrcattribute embedding<img>in the tag.

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

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

Precautions in a multi-site environment

AnQiCMS supports multi-site management, if you are running multiple websites under the same system, and each website may need to display different contact information, then you cancontactadd in thesiteIdParameters to specify the contact information of the site to be called. For example:{% contact with name="Cellphone" siteId="2" %}This makes it clear and orderly to manage information in a multi-site environment.

**Tips and Techniques

  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 in the website header navigation bar, pointing to a dedicated contact page.
  2. Create a "Contact Us" page:You can create a separate "Contact Us" page in the "Page Resources" section of the AnQiCMS backend.On this page, you can display all contact information, company maps, message forms, and other services to provide users with one-stop service.
  3. Keep the information up to date:Regularly check and update your contact information to ensure it remains accurate and effective, which 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 call directly and emails can be clicked to send directly.

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

Frequently Asked Questions (FAQ)

Q1: I have configured the contact information, but it does not display on the website front-end. What is the matter? A1:First, make sure you clicked the "Save" button on the "Contact Information Settings" page. Second, check whether your website template files have used it correctly.contactthe tags, andnameThe parameter is exactly the same as the field name set in the background. Finally, due to the cache of AnQiCMS, you can try to clear the website cache in the "Update Cache" function in the background, 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 Information Settings" of AnQiCMS provides the "Custom Setting Parameters" function.You can add custom fields here, for example, set the 'Parameter Name' to 'Facebook', and set the 'Parameter Value' to your Facebook homepage link, then you can use it in the template through{% contact with name="Facebook" %}Called and displayed.

Q3: Can AnQiCMS display different phone numbers or email addresses on different pages of the website? A3:The 'Contact Information Settings' of AnQiCMS 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`语句来动态显示不同的联系信息，但这需要更高级的模板定制能力。