How to add and display the WeChat contact information on the front end of AnQiCMS?

Managing and displaying WeChat contact information in Anqi CMS is an important aspect of enhancing user interaction and providing customer service.As an experienced website operator, I will give a detailed introduction on how to add your WeChat contact information in the AnQiCMS backend and elegantly present it to visitors through the frontend template.

Configure WeChat contact information in the AnQiCMS background

First, we need to set the WeChat contact information in the AnQiCMS backend management interface.This ensures that all data used by the front-end calls comes from a unified and easily manageable source.

Log in to your AnQiCMS backend.In the left navigation menu, find the 'Backend Settings' option and click to enter.In the background settings page, you will see a submenu named "Contact Information Settings", click on it.

On the 'Contact Information Settings' page, the system provides default contact information fields, including the 'WeChat ID' and 'WeChat QR Code' fields, which are related to WeChat.

• WeChat IDEnter your personal WeChat ID or enterprise service number ID in the corresponding input box. This is a text field, where users can directly copy your WeChat ID to add.
• WeChat QR codeClick the upload button next to this field, select the WeChat payment code or personal/enterprise WeChat QR code image file you have prepared for upload.After the upload is successful, the system will save the URL address of the picture.

In addition to these default fields, AnQiCMS also supports "custom setting parameters".If your business requirements are more complex, for example, if you need to display multiple WeChat accounts with different functions, or if you need other WeChat-related fields (such as the WeChat Official Account ID) in addition to the WeChat account and QR code, you can meet these needs by adding custom parameters.In most cases, the default 'WeChat ID' and 'WeChat QR code' fields are enough to meet the basic display requirements.

After completing the information entry and uploading the image, please be sure to click the "Save" button at the bottom of the page to ensure that your changes take effect.

Display WeChat contact information in the AnQiCMS front-end template

After WeChat contact information is configured in the background, the next step is to display it on the front page of the website.AnQiCMS provides a flexible template tag system that allows you to easily call this information at any location on the website.

To display WeChat contact information, we will use the built-in AnQiCMS featurecontactThe tag is used to obtain various configurations in the background "Contact Information Settings".

Call WeChat ID:

Display the WeChat ID you set in the background on the front-end page, you can use the following tag in the template file:

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

This code will directly output the text content you filled in the "WeChat ID" field in the background.You can place it in the footer, contact us page, sidebar, or any area where you need to display the WeChat number.

Call WeChat QR code:

Display WeChat QR code image requires using HTML's<img>Label, andcontacttag as an image'ssrcProperty value.

<div class="wechat-qrcode-container">
    <img src="{% contact with name="Qrcode" %}" alt="扫码添加微信" style="width: 150px; height: 150px; border: 1px solid #eee;">
    <p>扫码添加微信</p>
</div>

In this example,{% contact with name="Qrcode" %}tag will dynamically retrieve the URL of the WeChat QR code image you upload on the backend.altThe attribute provides descriptive text for the image, which helps with SEO and accessibility.styleUsed to control the size of the QR code image, you can adjust it according to the layout and design requirements of the website, or control it through the CSS style sheet.

Integrated into the website template:

Generally, you would integrate these contact methods into the public template files of the website, such asbash.html(used in the header or footer of the website), or in a dedicated "Contact Us" page template (such aspage/detail.html).

For example, in a footer template namedpartial/footer.htmlYou can layout it like this in the public footer template:

<footer class="site-footer">
    <div class="container">
        <div class="footer-contact-info">
            <h4>联系我们</h4>
            <p>电话：{% contact with name="Cellphone" %}</p>
            <p>邮箱：{% contact with name="Email" %}</p>
            <p>微信号：{% contact with name="Wechat" %}</p>
            <div class="wechat-qr">
                <img src="{% contact with name="Qrcode" %}" alt="扫码添加微信" class="img-responsive">
                <p>扫码添加微信</p>
            </div>
        </div>
        <div class="footer-copyright">
            <p>&copy; {% now "2006" %} {% system with name="SiteName" %}. All rights reserved.</p>
            <p>{% system with name="SiteIcp" %}</p>
        </div>
    </div>
</footer>

In your main template (such asindex.htmlorbase.html), you just need to reference this footer section:

{% include "partial/footer.html" %}

This way, no matter which page the user visits, they can see a unified and updated WeChat contact information in the footer.

By following these steps, you can easily manage WeChat contact information on the AnQiCMS backend, and you can also flexibly display it to your website visitors through the front-end template, thereby effectively improving the user experience and interaction efficiency of the website.

Frequently Asked Questions (FAQ)

Can I display multiple WeChat IDs or QR codes on my website?

The 'Contact Information Settings' page of AnQiCMS defaults to providing only a 'WeChat ID' and a 'WeChat QR code' field.If you need to display multiple, you can use the 'Custom Setting Parameters' feature.For example, you can add a custom parameter named "Customer Service WeChat ID" and another named "Customer Service WeChat QR Code", and fill in the corresponding information.{% contact with name="客服微信号" %}and{% contact with name="客服微信二维码" %}To call them.

2. Why did I upload a WeChat QR code image, but it doesn't display on the front end?

First, make sure you have clicked the "Save" button in the "Contact Information Settings" on the backend. Secondly, check the code in the frontend template.srcWhether the attribute is used correctly{% contact with name="Qrcode" %}The label. If it still does not display, it may be due to a failed image upload or an incorrect image path, you can right-click on the image element in the browser to check itssrcDoes the path point to a valid image file? Additionally, some browsers may cache image loading, you can try clearing the browser cache and accessing again.

How to make WeChat contact information display on specific pages or articles instead of the entire site?

If you only want to display WeChat contact information on specific pages (such as "About Us") or specific article detail pages, rather than uniformly across the entire site, you can use the above method.contactThe tag code is directly embedded into the template file of the specific page or article. For example, for a single page about us, you canpage/detail.htmladd in; for article details, you canarchive/detail.htmlAdd in the middle. In this way, these contact methods will only appear in this specific context and will not affect other parts of the website.