How to display the contact information of the website in the template, such as phone number, email, and WeChat QR code?

As an expert in CMS content management and website operation, I fully understand the importance of displaying contact information to the outside world.This is not only a bridge for users to communicate with you, but also a key link to enhance the professionalism and credibility of the website.In Anqi CMS, integrate these key information into the website template, which is flexible and efficient.

Display detailed guide to show website contact information in AnQiCMS template

One of the core purposes of a corporate website is to facilitate user contact, whether it is to inquire about products, seek service support, or engage in business cooperation, a clear and visible contact method is indispensable.AnQi CMS provides a直观and powerful mechanism for managing and displaying this information, allowing you to easily embed contact information such as phone numbers, email addresses, and WeChat QR codes into various corners of the website.

1. Configure website contact information: backend operation

Before displaying contact information on the website template, we need to make sure that this information has been properly configured in the Anqi CMS backend.

1. Visit the contact information settings pageLog in to your Anqicms backend, navigate toBackend settingsand then clickContact information settings. This is where you manage all your external contact information.

2. Fill in the default contact informationOn the contact information settings page, you will see a series of default fields, including 'contact person', 'contact phone number', 'contact address', 'contact email', 'WeChat ID', and 'WeChat QR code' and so on.Please fill in these fields according to your actual situation. For example, enter your business phone number in the 'Contact Phone' field, and fill in your official email address in the 'Contact Email' field.For the "WeChat QR code", you can directly upload a pre-prepared QR code image.

3. Add custom contact information (as needed)If the default field does not meet all your needs, for example, if you also want to display WhatsApp account or Facebook homepage links, Anqi CMS allows you to customize and add more parameters.

   • Under the bottom of the "Contact Settings" page, find the "Custom Setting Parameters" area.
   • Click the "Add" button and enter the new parameter information.
   • Parameter Name (FieldName)This is the unique identifier used to call this information in the template, it is recommended to use a clear English name, such as 'WhatsApp' or 'FacebookLink'.AnQi CMS will automatically convert it to camel case (for example, 'whatsapp' will become 'WhatsApp').
   • Parameter Value (Value): Enter the actual WhatsApp account, Facebook homepage URL, or other information.
   • Remark (Remark): Optional, used to describe the purpose of this parameter for future management. After saving these custom parameters, they can be called in the template like default fields.

In the website template, display contact information: front-end implementation

After configuring the contact information, the next step is to display them on the website's frontend page. Anqi CMS provides simple template tagscontactTo complete this task.

1. UnderstandcontactBasic usage of tags contactThe basic syntax of tags is:{% contact 变量名称 with name="字段名称" %}. Among them:

   • 变量名称Optional. If you need to process the contact information you have obtained further, you can assign it to a variable. If you do not need it, you can output it directly.
   • name="字段名称"This is the most important part,字段名称It is the parameter name configured in the background "Contact Information Settings" (including default fields and custom fields).

2. Display contact phone numberDisplay your contact phone number in the template, usingname="Cellphone":

   <!-- 直接输出电话号码 -->
   <p>联系电话：{% contact with name="Cellphone" %}</p>
   
   <!-- 赋值给变量后输出 -->
   {% contact phoneNum with name="Cellphone" %}
   <p>咨询热线：<a href="tel:{{phoneNum}}">{{phoneNum}}</a></p>
   

   It is recommended to wrap the phone number in<a>Labels, and usetel:an agreement, for easy dialing by mobile device users.

3. Display contact emailTo display the contact email address, usename="Email":

   <!-- 直接输出邮箱地址 -->
   <p>邮箱：{% contact with name="Email" %}</p>
   
   <!-- 赋值给变量后输出 -->
   {% contact emailAddress with name="Email" %}
   <p>发送邮件至：<a href="mailto:{{emailAddress}}">{{emailAddress}}</a></p>
   

   Similarly, enclose the email address in<a>tags and usemailto:the protocol to make it convenient for users to click to send emails.

4. Display WeChat QR codeTo display the WeChat QR code image, it is necessary to usename="Qrcode":

   <!-- 直接输出微信二维码图片 -->
   <div>
       <p>扫码添加微信：</p>
       <img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width:120px; height:120px;" />
   </div>
   
   <!-- 赋值给变量后输出 -->
   {% contact wechatQrcode with name="Qrcode" %}
   {% if wechatQrcode %}
   <div>
       <p>扫码咨询：</p>
       <img src="{{wechatQrcode}}" alt="微信二维码" style="width:100px; height:100px;"/>
   </div>
   {% endif %}
   

   This has been used{% if wechatQrcode %}Make a judgment to ensure that only when the QR code image is uploaded on the back-end, it is displayed, and avoid displaying a broken image link.

5. Display custom contact informationIf you add custom parameters in the background, such as a field named "WhatsApp", you can call it like this in the template:

   <!-- 显示WhatsApp账号 -->
   <p>WhatsApp：{% contact with name="WhatsApp" %}</p>
   
   <!-- 显示Facebook链接 -->
   {% contact facebookLink with name="FacebookLink" %}
   {% if facebookLink %}
   <p>关注我们：<a href="{{facebookLink}}" target="_blank" rel="nofollow">Facebook主页</a></p>
   {% endif %}
   

   It is recommended to add external linkstarget="_blank"Open the link in a new window and addrel="nofollow"Instruct the search engine not to pass weight.

Third, key precautions

• Field name accuracy: Make surenameThe field name in the parameter is exactly the same as the 'Parameter Name' in the 'Contact Information Settings' on the background, including case sensitivity. The tags in Anqi CMS are case-sensitive.
• Under the multi-site mode,siteIdIf you have enabled multi-site management and wish to call the contact information of a specific site, you cancontactthe tag withsiteId="您的站点ID"Parameter. Generally, this parameter does not need to be set, as the system will automatically identify the current site.
• Cache updateAfter modifying the contact information in the background, if the front page does not update immediately, please be sure to clear the system cache.You can find the "Update Cache" feature in the left menu of the Anqi CMS backend.

By following these steps, you can easily display the required contact information at any template location on the Anqi CMS website (such as the header, footer, contact us page, or sidebar), providing your users with a convenient communication channel.

Frequently Asked Questions (FAQ)

1. How can I add more contact information fields in Anqi CMS backend, such as WhatsApp account or detailed enterprise address information?

You can customize it on the "Background Settings" -> "Contact Information Settings" page in the Anq CMS background.There is a "Custom Setting Parameters" area at the bottom of the page. Click the "Add" button, then enter the desired field name (e.g., "WhatsApp") in the "Parameter Name" field, fill in the specific content in the "Parameter Value" field, and optionally add a "Note".After saving, this new contact information field can be used in the template{% contact with name="WhatsApp" %}Call the tag like this.

2. I updated the contact information on the backend, but the front page of the website did not change immediately, why is that?

This is usually due to website caching. Anqi CMS caches page content to improve access speed.When you update global configurations such as contact information in the background, you need to manually clear the cache to make the latest information display on the front-end page.Please log in to the Anqi CMS backend, find the "Update Cache" option in the left menu, and click to perform the cache clearing operation.After refreshing the website page, the new contact information should display normally.

3. I want to display the WeChat QR code as a background image on thedivHow to write the template code on the element?

To use the WeChat QR code as a background image, you first need to go throughcontactThe tag retrieves the image URL of the QR code and then applies it as a CSS style to the target element. An example is shown below:

{% contact wechatQrcode with name="Qrcode" %}
{% if wechatQrcode %}
<div class="wechat-bg-section" style="background-image: url('{{wechatQrcode}}'); background-size: cover; background-position: center;">
    <!-- 这里是您的其他内容 -->
    <p>扫码联系我们</p>
</div>
{% else %}
<p>暂无微信二维码</p>
{% endif %}

This code will first try to obtain the WeChat QR code URL. If successful, it will create adivelement and use inline stylesbackground-imageSet the QR code as the background image. You can adjust the CSS properties as needed, such asbackground-sizeandbackground-positionto control the display of the background image.