The contact information of the website is the key to establishing a connection with users and providing support.AnQiCMS provides an intuitive and flexible way to manage and display this important information, whether it's a phone number, address, or links to various social media platforms, all of which can be easily achieved.
Configure the contact information of the website in the backend
To configure the contact information of the website, you can first log in to the Anqi CMS backend management interface.In the left navigation bar, find and click "Background Settings", then select "Contact Information Settings".Here is all the contact information you may need to display.
The system has set some common contact fields by default, such as:
- Contact:It is usually the main contact person's name for your website or company.
- Contact phone number:The consultation phone number of the user, which can be directly clicked to call.
- Contact address:The address of your company or entity, convenient for user navigation.
- Contact email:The email address for users to send emails for communication.
- WeChat ID/QR Code:For domestic users, these two methods are common communication channels.
You just need to fill in the information in the corresponding input box, and then save. This information will take effect immediately within the system and be ready for frontend calls.
Add more social media and other custom contact methods
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 Settings Parameter' feature.
Below the 'Contact Information Settings' page, you will see the option to add custom parameters. There are three key items that need to be filled in:
- Parameter name:This is the name for template usage, it is recommended to use English, the system will automatically convert it to camel case naming (e.g., input
whatsapp, the system will recognize asWhatsAppThis name will be the 'key' you use to refer to this information on the website front-end. - 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.
- Note:This is an internal identifier used 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 website front end.
After setting up the background information, the next step is to display these contact methods on various pages of the website.The Anqi CMS makes this process very easy with simple template tags.{% contact %}Tags are used to retrieve this information.
The template files of the website are usually located/templateIn the specific theme folders under the catalog, such as headers (header), footers (footer), or the "Contact Us" page, etc.
Standard contact information call
To display the default 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 tags will directly output the corresponding content you enter in the background.
Display social media links and custom information
Anqi CMS's{% contact %}Tags also come with built-in support for multiple social media platforms. This means that even without adding through the 'Custom Settings Parameters', as long as you fill in the account or link of these social media platforms 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, it covers almost all mainstream social media platforms.
The calling method is exactly the same for the contact information you add through the "Custom Setting Parameters". Just setnameProperty settings can be set to your custom 'parameter name'. For example, if you have customized a name ofSkypeIDparameter:
{% contact with name="SkypeID" %}
Especially, if you need to display WeChat QR code image, for example:<img src="{% contact with name="Qrcode" %}" alt="微信二维码" />It is important to note that when calling image addresses or other URL-like content, they are usually passed directly assrcthe value of the attribute.
Integrated display example
Assume 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>
This way, you can flexibly display the required contact information at different locations on the website, ensuring that all information is sourced from the unified management backend, which is convenient for subsequent updates and maintenance.
Common Questions (FAQ)
1. Why doesn't the website front end immediately display the changes after I updated the contact information in the background?The AnQi CMS often uses caching to improve website access speed.After you update the background information, you may need to manually clear the website cache, or wait for the automatic cache update cycle to end before new information appears on the front end.You can find the 'Clear Cache' option manually in the upper right corner of the background management interface.
2. Can I directly display images or HTML snippets as contact information? For example, custom social media buttons with icons?Yes, you can definitely. In the "Contact Information Settings" backend, when you add a custom parameter and fill in the "Parameter Value", you can directly input an HTML code snippet, such as containing<img>The icon of the tag or the complete button HTML structure. Then, when calling it on the frontend, use{% contact with name="您的自定义参数名" %}, and may require coordination with|safefilters (for example{{ contactInfo|safe }}）to ensure that the HTML code is parsed correctly rather than being escaped.
How to display contact information with different styles or layouts on different pages (such as the homepage and 'Contact Us' page)?The template system of Anqi CMS is very flexible. You can use it in different template files such asindex.htmlandcontact.htmlWrite the HTML structure and style of contact information in the respective brackets. Then, use the same{% contact %}Retrieve contact information from the background configuration using tags. 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 vary according to the template design.