As an experienced website operations expert, I am well aware of the importance of efficient communication between websites and users.In today's digital age, WeChat, as an important social tool, has made its QR code an indispensable part of attracting attention, providing services, and accumulating users for enterprises.For operators using AnQiCMS (AnQi Content Management System), how to skillfully embed WeChat QR code images on the website, which can maintain the professional image of the website while making it convenient for users to scan and follow, is the key to improving user experience and conversion rate.
AnQiCMS is a lightweight yet powerful content management platform, designed for small and medium-sized enterprises and content operation teams, with its efficient, customizable, and easy-to-expand features based on the Go language.It focuses on SEO-friendly system design and ease of operation, making it easy for even non-technical operators to get started quickly.Today, I will take you deep into the contact label of AnQiCMS, and teach you step by step how to elegantly present your WeChat QR code image on the website.
Step 1: Upload your WeChat QR code image to the AnQiCMS media library
Before we begin, please ensure that you already have a clear, appropriately sized WeChat official account or personal WeChat QR code image. This image will be the basis for our operations.
AnQiCMS provides a convenient "Image Resource Management" feature, allowing you to centrally manage all the images and video resources of your website. To upload your WeChat QR code image, you need to log in to the AnQiCMS backend and then navigate to“Page Resources”Select,"Image Resource Management".Here, you can easily upload your QR code image and categorize it for later search and management.After the upload is complete, the system will generate a unique access address for your image. This address is crucial for our subsequent operations.
Step 2: Configure WeChat QR code information in the AnQiCMS backend
The "Contact Information Settings" in AnQiCMS is the center for managing the website's external contact information.It not only includes common information such as contacts, phone numbers, and addresses, but also specially reserves an entry for setting WeChat QR codes.
After uploading the image, please return to the main interface of the backend, click“Backend Settings”then select“Contact Information Settings”You will see a series of default contact information fields. Scroll down to findWeChat QR codeThis item.Click the corresponding edit button or selection box, and you will see a media library selector.Here, you can select your WeChat QR code image from the just uploaded image resources.After saving the settings, AnQiCMS has already associated your WeChat QR code image address with the "WeChat QR Code" field on the backend.
It should be noted that AnQiCMS allows you to add additional contact information fields through the "Custom Setting Parameters".If you have multiple WeChat QR codes (such as public account QR codes and customer service WeChat QR codes), you can use this feature to add new custom fields, such as naming it 'Customer Service WeChat QR Code', and then upload and associate another image.But for this tutorial, we mainly focus on the default "WeChat QR Code" field.
Step 3: Use 'Contact Information Tags' to embed the WeChat QR code into the website template
AnQiCMS's template system is flexible and powerful, drawing inspiration from Django's template engine syntax, which separates content from presentation, making it intuitive and efficient to adjust website layout and content display. For our need to insert a WeChat QR code, AnQiCMS provides a feature namedcontactThe dedicated template tag, which can easily obtain the various information configured in the "Contact Information Settings" on the backend.
To display the WeChat QR code image on the front page of the website, you need to edit the website template file. The template files of AnQiCMS are usually stored in/templatefolder, and named with.htmlas a suffix. For example, you may want to display a QR code in the footer of the website (footer.html) or the "Contact Us" page (contact.htmlorpage/detail.html)
Open the template file you need to modify, then find the location where you want to display the QR code. You can obtain and display your WeChat QR code image by using the following tags:
<img src="{% contact with name="Qrcode" %}" alt="请扫描我们的微信二维码" />
The meaning of this code is:
<img>【en】: This is the standard HTML image tag.src="... "【en】: Specifies the image source address.{% contact with name="Qrcode" %}【en】: This is a template tag of AnQiCMS. It will extract information from the background 'Contact Settings' page.nameThe field value for 'Qrcode', which is the WeChat QR code image URL we configured previously, and it is used assrcthe value of the attribute.alt="请扫描我们的微信二维码"Provide alternative text for images, which is friendly to visually impaired users and also helps search engines understand the content of the image, improving SEO.
If you want to assign the image URL to a variable and then perform more complex operations, you can also write it like this:
{% contact wechatQrcodeUrl with name="Qrcode" %}
{% if wechatQrcodeUrl %}
<img src="{{ wechatQrcodeUrl }}" alt="请扫描我们的微信二维码，了解更多" style="width: 150px; height: 150px;" />
{% endif %}
Here, we first assign the obtained QR code URL towechatQrcodeUrlthe variable, and then pass through{% if %}Check if the variable exists (i.e., whether the background is configured with a QR code), and then embed it<img>Label. We can also directly access it herestyleAdjust image size and style using properties or an external CSS file.
Step 4: Save and preview your website.
After modifying the template file, save the file. If your AnQiCMS has caching enabled, you may need to access the backend'sUpdate Cache功能来clear old cache, ensuring that new modifications take effect immediately.
Now, open your website's frontend page, navigate to the location where you modified the template. You should be able to see your WeChat QR code image successfully displayed on the website!
Operational Tips: Enhance the Effectiveness of WeChat QR Codes
- Clear Call-to-ActionPlace clear text such as 'Scan to follow our official WeChat account' or 'Add customer service WeChat for exclusive services' next to the QR code to guide users to the next step.
- Suitable positionIn addition to the footer and contact us page, consider displaying the QR code at the side bar, the end of the article, or in pop-ups at the right time, but avoid disturbing the user's reading.
- Responsive DesignEnsure that the QR code image is clearly displayed on different devices (PC, mobile phone, tablet) and automatically adjusts the size according to the screen size.AnQiCMS supports adaptive, code adaptation, PC+mobile independent sites, and you can adjust it according to your template type.
- [en]Regular updatesIf your WeChat QR code changes, remember to update the image and settings in the AnQiCMS backend in time.
Through the powerful functions and simple operation of AnQiCMS, you can easily integrate WeChat QR codes into your website, providing your users with a more convenient interactive channel, and helping with your content operation and business development.
Common Questions and Answers (FAQ)
1. How can AnQiCMS implement adding multiple WeChat QR codes (such as official accounts and customer service)?
The 'Contact Information Settings' provided by AnQiCMS includes a 'WeChat QR Code' field. If you need more, you can do so through the bottom of the 'Contact Information Settings' page.Custom setting parametersTo implement the function. Click 'Add Custom Parameter' to create a new parameter, such as filling in 'Parameter Name'CustomerServiceWechatQrcode(Customer Service WeChat QR Code)，“Parameter Value”upload another QR code image and add remarks. After that, you can use{% contact with name="CustomerServiceWechatQrcode" %}this label to call it.
2. My WeChat QR code image has been uploaded and configured, and the template code has been added, but why is it not displayed on the website?
Firstly, please ensure that you haveSaved the "Contact Settings" on the back-end.Next, check if you have.Cleared the cache of AnQiCMS.You can find the "Update Cache" feature in the left navigation bar on the back end. Again, check if yourtemplate file has been uploaded correctly and is effectiveEnsure that your QR code image file itself isaccessible normallyIt can be verified directly by entering the image URL in the browser. If the image path or file is damaged, it may also cause the image to not display.
How to adjust the size and style of WeChat QR code images?
The size and style of the WeChat QR code image on the website are mainly controlled by standard HTML and CSS. Inserted in the template<img>After the label, you can adjust it in the following ways:
- Inline styles: Directly in
<img>the label usestyleattributes, for example<img src="..." style="width: 150px; height: 150px;" />. - CSS class: For
<img>Add a CSS class to the tag, for example<img src="..." class="wechat-qrcode" />Then define the style for this class in your CSS file, for example.wechat-qrcode { width: 150px; height: auto; display: block; margin: 0 auto; }. This method is recommended as it can better manage styles. - The static resources (such as CSS files) of AnQiCMS templates are usually stored in
/public/static/directory, where you can find and modify your stylesheet.