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 the bridge for users to communicate with you, but also a key link to enhance the professionalism and credibility of the website.In the AnQi CMS, integrating these key information into the website template is both flexible and efficient.

In AnQiCMS template, detailed guide on displaying website contact information

I. Configure website contact information: Backend operation

Before displaying contact information on the website template, we need to ensure that these details have been properly configured in the Anqi CMS backend.

  1. Visit the contact information settings pageLogin to your security CMS backend, navigate toBackend settings, and then click.Contact information settings. This is the central location for managing all your external contact information.

  2. Enter default contact information

  3. Add custom contact methods (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, SafeCMS allows you to add more parameters to customize.

    • Below the "Contact Information Settings" page, find the "Custom Settings Parameters" area.
    • Click the "Add" button and enter the new parameter information.
    • Parameter Name (FieldName)This is the unique identifier for calling this information in the template, it is recommended to use a clear English name, such as “WhatsApp” or “FacebookLink”.English CMS will automatically convert it to camel case naming (for example, input 'whatsapp' will become 'WhatsApp').
    • Parameter Value (Value)Fill in the actual WhatsApp account, Facebook page URL, or other information.
    • RemarkOptional, used to describe the purpose of this parameter, convenient for future management. After saving these custom parameters, they can be called in the template just like default fields.

In the website template, display contact information: frontend implementation

Configure the contact information first, and then display them on the website front page. Anqi CMS provides simple template tagscontactto complete this task.

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

    • 变量名称：Optional. If you need to process the contact information you obtain further, you can assign it to a variable. If not, you can output it directly.
    • name="字段名称"This is the most important part,字段名称which is the "Parameter Name" you configured in the "Contact Information Settings" on the backend (including default fields and custom fields).

  2. Display contact phone numberTo display your contact phone number in the template, usename="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>Label it and usetel:This protocol is convenient for mobile device users to click and dial.

  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, enclosing the email address<a>in the tag and usingmailto:the protocol can make it convenient for users to click to send emails.

  4. Show WeChat QR CodeTo display WeChat QR code images, 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 %}

    Here, we use{% if wechatQrcode %}Perform a judgment to ensure that the QR code image is displayed only when the backend uploads it, to avoid displaying a broken image link.

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

    <!-- 显示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 for external linkstarget="_blank"Let the link open in a new window and addrel="nofollow"Inform the search engine not to pass weight.

III. Key Points of Attention

  • Field name accuracy: EnsurenameThe field name in the parameter is exactly the same as the 'Parameter Name' in the 'Contact Information Settings' on the back end, including the case. The tags in Anqi CMS are case-sensitive.
  • In the multi-site modesiteId：If you have enabled multi-site management and want to call the contact information of a specific site,contacttag.siteId="您的站点ID"Parameters. In most cases, this parameter does not need to be set, as the system will automatically identify the current site.
  • Cache UpdateIn the background, after modifying the contact information, if the front-end 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.

Common Questions and Answers (FAQ)

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

You can customize it on the "Contact Information Settings" page under the "Backend Settings" in the Anqi CMS backend.There is an 'Custom Setting Parameters' area at the bottom of the page.Click the "Add" button, then enter the name of the field you want in the "Parameter Name" field (for example, "WhatsApp"), fill in the specific content in the "Parameter Value" field, and optionally add a "Note".{% contact with name="WhatsApp" %}Call the tags in this way.

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 caused by website cache.The AnQi CMS will cache 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 front-end page display the latest information.Please log in to the AnQi CMS backend, find the "Update Cache" option in the left menu, and click to execute the clear cache 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 a certain pagedivElement above, how should the template code be written?

To use the WeChat QR code as a background image, you first need to throughcontactThe label gets the QR code image URL 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 get the WeChat QR code URL. If it is successful, it will create andivelement and use inline stylesbackground-imageSet the QR code as the background image. You can adjust the CSS properties as needed,background-sizeandbackground-positionto control the display of the background image.