How to correctly display the WeChat number of the website in the AnQiCMS template?

As an experienced website operations expert, I am well aware of the importance of social media channels, especially WeChat, in connecting businesses with users, providing services, and even promoting sales in the digital age.AnQiCMS (AnQiCMS) is a content management system tailored for operators, naturally taking full consideration of these common operational needs.Today, let's delve deeply into how to display your website's WeChat number in the AnQiCMS template in the most correct and elegant way.

Display WeChat number correctly in AnQiCMS template: Step by step guide to implementation

In today's rapidly changing internet environment, presenting a company's WeChat contact information directly on the website is an effective way to enhance user interaction, provide convenient services, and strengthen brand affinity.AnQiCMS fully understands the operator's needs, making everything easy through its flexible backend settings and powerful template tag features.This article will serve as your operation guide, from backend configuration to frontend invocation, providing you with a detailed explanation of how to correctly display your WeChat number and WeChat QR code in the AnQiCMS template.

1. Backend configuration: Enable WeChat number information to be called

Firstly, ensure that your WeChat number and WeChat QR code are properly entered in the AnQiCMS backend system. This is a prerequisite for the front-end template to function correctly.

1. Enter contact information settingsLog in to your AnQiCMS backend management interface, find and click on the item in the left navigation bar,Backend settingsthen select the item.Contact information settingsThis is the core area where you manage all the contact information of your website.

2. Enter your WeChat ID and upload the QR code.In the "Contact Information Settings" page, you will find that AnQiCMS has preset a series of commonly used contact fields, including the field of "WeChat IDAndWeChat QR code.

   • In the 'WeChat ID' input box, please accurately enter your personal WeChat ID or WeChat Official Account ID.
   • Click the upload button next to the \Make sure the QR code image is clear and recognizable, as this will directly affect the user's scanning experience.

3. Save SettingsAfter filling in and uploading the WeChat number and WeChat QR code, please be sure to click the "Save" button at the bottom of the page to make your changes effective.

It is worth mentioning that if in the future you have other customized social media contact information that needs to be displayed, and the default fields do not cover it, you can also make use of the "Contact Information Settings" page's "Custom settings parametersFunction to add a new contact information field, similar in principle to WeChat's call, and very flexible.

Second, front-end template: usingcontactTags for precise presentation

After the background information is configured, the next step is how to present this information to visitors in the AnQiCMS website template through concise tag code. AnQiCMS provides a special tag for this—contactThe tag can conveniently retrieve the information you fill in for each item in the "Contact Information Settings" on the back end.

1. contactBasic usage of tags:contactThe syntax of the tag is very intuitive:{% contact 变量名称 with name="字段名称" %}In which，“字段名称”corresponds to the specific contact type set in the background (such as “Wechat” or “Qrcode”), and “变量名称then you allow you to assign the data obtained to a template variable for flexible use in the HTML structure. Of course, if it is only a simple direct output, it can also be omitted.变量名称Part.

2. Display WeChat number (text format): If you want to display the text of the WeChat number directly on the page, such as in the footer or contact us page, you can usename="Wechat"Parameter.

   <p>我的微信号：<span class="wechat-number">{% contact with name="Wechat" %}</span></p>
   

   Or, you can assign the WeChat number to a variable and then use it, which is very useful when you need to perform additional processing on the number (such as wrapping a link or combining with other text):

   {% contact myWechatId with name="Wechat" %}
   {% if myWechatId %}
       <p>如需进一步咨询，请添加微信：<span class="wechat-id-text">{{ myWechatId }}</span></p>
   {% endif %}
   

3. Display WeChat QR code (image format): Displaying WeChat QR code image is just as simple, just need tonamethe parameter toQrcodeJust do it.

   <div class="wechat-qrcode-container">
       <img src="{% contact with name="Qrcode" %}" alt="扫描微信二维码添加好友" class="wechat-qr-image" />
       <p>扫码添加微信，获取专属服务</p>
   </div>
   

   温馨提示In<img>the tag withaltAttributes are a very good practice, they not only help search engines understand the content of images, but also provide text descriptions when images cannot be loaded, improving the accessibility of the website (Accessibility).

4. Use together: Text and QR code side by sideIn many scenarios, you may want to display the WeChat ID text and QR code image simultaneously to provide users with multiple ways to add.

   <div class="contact-wechat-section">
       <h3>联系我们</h3>
       {% contact myWechatId with name="Wechat" %}
       {% contact myQrcodeImage with name="Qrcode" %}
   
       {% if myWechatId %}
           <p>微信号：<span class="wechat-text-display">{{ myWechatId }}</span></p>
       {% endif %}
   
       {% if myQrcodeImage %}
           <div class="wechat-qr-wrapper">
               <img src="{{ myQrcodeImage }}" alt="添加微信好友二维码" class="responsive-qr-code" />
               <p>扫一扫，立即沟通</p>
           </div>
       {% endif %}
   </div>
   

   Please note,contactThe content obtained from the label will be output directly as a string, for example, the WeChat QR code ofsrcProperty value.

Three, optimize the display and user experience: make the WeChat ID more attractive

It's not enough to just display the WeChat number, how to better reach users and improve conversion is something every operations expert needs to think about.

1. Reasonable layout, within reachAccording to your website design and user behavior habits, place the WeChat number in a prominent and logical location. Common layouts include:

   • Website Footer (Footer)Provide a persistent contact entry.
   • Independent contact page.Concentrate on displaying all contact information.
   • Sidebar or floating button.Ensure that the WeChat entry is always visible to the user while browsing the website.
   • Article content pageAt the end of certain types of articles, guide users to add WeChat to get more information.

2. Responsive design, compatible with various devicesespecially WeChat QR code images, should remain clear and easy to scan on devices of different sizes. Through simple CSS styles (such asmax-width: 100%; height: auto;Ensure the QR code displays perfectly on mobile devices.

3. Lead copy, improve conversionIn addition to direct display, accompanied by clear and attractive guiding copy, it can effectively enhance the willingness of users to add WeChat.For example: 'Scan the QR code to add WeChat and get exclusive discounts!'}]One-to-one service, dedicated consultants waiting for you!Please.

4. Image optimization, load quicklyEnsure the WeChat QR code image uploaded is of high clarity and moderate size. AnQiCMS is in the quotation mark.