How to configure and display the contact information of the AnQiCMS website, such as phone number, address, and social media?

The contact information of the website is the key to connecting with users and providing support.AnQiCMS provides an intuitive and flexible way to manage and display this important information, whether it is a phone number, address, or various social media platform links, it can be easily realized.

Configure the website contact information in the background

To configure the website contact information, you can first log in to the Anqi CMS backend management interface.In the left navigation bar, find and click "Backend Settings", then select "Contact Information Settings".Here is a collection of all the contact information you may need to display.

The system defaults to some common contact fields, such as:

• Contact:It is usually the main contact person's name for your website or company.
• Contact Phone:The user's consultation phone number, which can be dialed directly by clicking.
• Contact address:Your company or entity address, convenient for user navigation.
• Contact Email:Email address for user communication.
• WeChat ID/QR code:These two methods are common communication channels for domestic users.

You just need to fill in the information in the corresponding input box, then save it. This information will take effect immediately within the system and be ready for the front-end call.

Add more social media and other custom contact information

The strength of AnQi CMS lies in its customizability. If you need to display social media platforms other than the default fields, such as WhatsApp, Facebook, Twitter, Instagram, LinkedIn, or YouTube, or any other contact information you consider important, you can use the "Custom Setting Parameters" feature.

Under the bottom of the "Contact Information Settings" page, you will see the option to add custom parameters. There are three key items that need to be filled out:

1. Parameter name:This is the name provided for the template, it is recommended to use English, the system will automatically convert it to camel case (for example, inputwhatsapp, the system will recognize asWhatsApp). This name will be the key for referencing this information on the website front-end.
2. Parameter value:The specific content represented by the parameter name, such as your WhatsApp account, Facebook homepage link, or a link to an online customer service system.
3. Note:This is an internal identifier to remind you of the purpose of this custom parameter, it will not be displayed on the front end.

In this way, you can infinitely expand the contact information of the website according to your business needs, making it more comprehensive and professional.

Display contact information on the front end of the website

After configuring the background information, the next step is to display these contact methods on various pages of the website.A security CMS makes this process very easy through simple template tags.You need to use in the website template file{% contact %}Tags to retrieve this information.

The website template files are usually located/templateIn the specific topic folder under the catalog, for example, header (header), footer, or the 'Contact Us' page, etc.

Standard contact information call

To display the default preset contact information, you can use{% contact with name="字段名称" %}format. For example:

• To display the contact phone number:{% contact with name="Cellphone" %}
• To display the company address:{% contact with name="Address" %}
• To display the contact email:{% contact with name="Email" %}

These labels will directly output the corresponding content you enter in the background.

Display social media links and custom information

Of Security CMS{% contact %}The tag also built-in support for various social media platforms. This means that even if not added through "custom settings parameters", as long as you fill in these social media accounts or links in the standard fields in the background, you can directly call them:

• {% contact with name="Facebook" %}
• {% contact with name="Twitter" %}
• {% contact with name="WhatsApp" %}
• wait, almost covers all mainstream social media.

The calling method is exactly the same for the contact information you add through "custom settings parameters". Just need tonameSet the attribute to your custom parameter name. For example, if you have customized a namedSkypeIDparameter:

• {% contact with name="SkypeID" %}

Especially, if you need to display a WeChat QR code image, for example:<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />It should be noted that when calling image URLs and other URL-like content, they are usually used directly assrcthe value of the attribute.

Integrated display example

Assuming you want to display the contact phone number, address, email, and Facebook homepage link uniformly in the footer of the website (assuming Facebook is added through custom parameters):

<div class="footer-contact">
    <p>电话: <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></p>
    <p>地址: {% contact with name="Address" %}</p>
    <p>邮箱: <a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></p>
    <p>关注我们: <a href="{% contact with name="Facebook" %}" target="_blank" rel="noopener noreferrer">Facebook</a></p>
</div>

In this way, you can flexibly display the required contact information at different locations on the website, and ensure that all information comes from the unified management of the background, which is convenient for subsequent updates and maintenance.

Frequently Asked Questions (FAQ)

1. I updated my contact information in the background, why doesn't the website front end display the changes immediately?The AnQi CMS usually uses caching to improve website access speed.After you update the background information, you may need to manually clear the website cache, or wait until the automatic cache update cycle ends, so that the new information can be displayed on the front end.You can find the 'Clear Cache' option in the upper right corner of the background management interface to clear manually.

2. Can I directly display images or HTML snippets as contact information? For example, customize a social media button with an icon?Yes, you can completely. In the background "Contact Information Settings", when you add custom parameters and fill in the "Parameter Value", you can directly input an HTML code snippet, such as containing<img>The icon of the label or the complete HTML structure of the button. Then, when calling it on the front end, use{% contact with name="您的自定义参数名" %}and may need to be配合|safefor example, a filter (such as{{ contactInfo|safe }}）to ensure that HTML code is correctly parsed and not escaped when output.

How to display contact information with different styles or layouts on different pages (such as the home page and the "Contact Us" page)?The Anqi CMS template system is very flexible. You can use different template files such asindex.htmlandcontact.htmlWrite the HTML structure and style for the contact information. Then, use the same template files.{% contact %}Label to retrieve contact information from the background configuration. In this way, the display content on the front end will remain consistent regardless of how the background information is updated, but the appearance can be different according to the template design.