How to obtain and display the contact information, phone number, email, WeChat, and other contact methods set in the background?

Hello, as an experienced security CMS operator, I know that clear and convenient contact information on the website is crucial for user experience and business conversion.Today, let's discuss in detail how to configure contact information in the Anqi CMS backend and display it flexibly and accurately on various positions of the website front-end.

Configure website contact information: Back-end operation guide

In AnQi CMS, managing the website's contact information is an intuitive and powerful process. First, we need to enter the backend management interface for configuration.

To access the contact information settings, please log in to the Anqi CMS backend, find the "Backend Settings" menu through the left navigation bar, and then click the "Contact Information Settings" submenu.Here, you will see a series of default contact information settings, including contacts, phone numbers, contact addresses, contact email, WeChat ID, and WeChat QR code.These fields are designed to meet the basic needs of most corporate websites.

You just need to fill in your contact information in the corresponding input box.For example, enter your contact name in the "Contact" field, and enter your business phone number in the "Phone number" field.If your WeChat QR code is ready, you can directly click the upload button to upload the picture.

It is worth mentioning that AnQi CMS also provides high flexibility, allowing you to add custom contact information according to the specific needs of your website.In the "Custom Settings Parameters" area, you can click the "Add" button to create a new contact information field, such as "WhatsApp Contact Information", "Skype Account", or "Backup Email" and so on.You need to set a "parameter name" for each custom parameter as the identifier for template calls (it is recommended to use English), and fill in the corresponding "parameter value".Finally, you can add a "note" to facilitate future management and understanding of the parameter's purpose.After completing all information entry and adjustments, be sure to click the save button to ensure changes take effect.

Display contact information on the website front-end: template call practice

Once the contact information is configured in the background, the next step is to correctly reference and display this information in the website template. Anqi CMS provides a special "Contact Information Tag" for this purpose. ...contact), so that template developers can easily access this data.

Call the default contact method field

contactThe use of tags is very concise, you can use{% contact 变量名称 with name="字段名称" %}The form of the variable name to obtain a specific field value. If the variable name is omitted, the label will output the field content directly.

Here are some examples of commonly used contact information fields, you can place them in the header, footer, "Contact Us" page, or any location where you need to display contact information:

To display the contact name, you can use:

<span>联系人：{% contact with name="UserName" %}</span>

If you need to display the contact phone number, you can write it like this:

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

Here we have added extra:tel:The protocol facilitates direct dialing by mobile device users and has been used.rel="nofollow"Property.

Display contact email:

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

Similarly,mailto:The protocol allows users to send emails directly by clicking.

Show WeChat ID:

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

For WeChat QR code images and similar resources, you need to refer to them as images of thesrcattribute, and pay attention to usingsafea filter to ensure the correct output of HTML code:

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

In this way, the WeChat QR code image uploaded on the backend can be displayed normally on the front end.

Invoke custom contact information field

If you have customized a new contact information field in the background, such as the previously mentioned "WhatsApp contact information", its "parameter name" isWhatsAppThen the way to call it in the template is similar to the default field, justnameThe parameter value with your custom parameter name:

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

Call the contact method in a multi-site environment

For an AQ CMS system deployed on multiple sites, if you want to call the contact information of another site in a template on a specific site, you can usesiteIdSpecify the site ID with parameters. For example, the contact phone number of a site with ID 2:

<span>其他站点电话：{% contact with name="Cellphone" siteId="2" %}</span>

However, in most cases, you will display the contact information of the current site in the template of the current site, and there is no need to specifysiteIdParameter.

Content Optimization and Practical Suggestions

When displaying contact information, it is equally important to ensure that the content is presented correctly.

First, make sure your contact information is up-to-date and accurate.Contact information that is expired or incorrect can confuse and frustrate users, severely affecting user experience.Regularly check this information, especially after business adjustments or personnel changes.

Secondly, place the contact information in a location where users can easily find it.The website's header and footer are common preferences as they are visible on every page.At the same time, creating an independent "Contact Us" page, providing a more detailed contact form, map, and all contact channels will further enhance the trust and convenience of users.

Finally, considering the needs of different user groups, provide as much diversity of contact methods as possible.For example, in addition to phone and email, WeChat, WhatsApp, online customer service, and other services can meet the different usage habits of users.Make sure these links are clickable and can guide users to the correct communication channels.

Frequently Asked Questions (FAQ)

1. Why did I set the contact information in the background, but it did not display on the front-end page?

This is usually due to incorrect usage of the template.contactThe tag is being called, or the template cache is not updated in time. Please check if your template file contains the corresponding{% contact ... %}tag and make surenameThe parameter matches the field name set in the background (including custom fields).If the label is used correctly, please try to clear the security CMS system cache to ensure that the latest data can be loaded.

2. Can I make different pages display different contact information?

contactThe label retrieves the universal contact information settings, which cannot be changed dynamically according to the page.If you need to display unique contact information on a specific page, consider inserting text or images directly in the page content editor, or create an independent contact page using the "single page" feature and embed the required information in the content.Another advanced method is to use custom fields, add additional contact information fields in the backend content model for specific pages, and call them in the page templates.

3. How can I add click-to-dial/send email functionality to a phone number or email?

You can use HTML in the template.tel:andmailto:To implement the protocol. For example, for phone:<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>. For email:<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a>. These protocols allow users to make phone calls or launch email clients directly by clicking on links on supported devices.