How to retrieve and display custom contact information from the background in a template (such as phone, email, WeChat)?

In website operation, clearly displaying contact information is crucial for improving user experience and promoting business communication.Whether it is customer consultation, seeking support, or business cooperation, visitors hope to quickly find and contact you.AnQiCMS provides a convenient and efficient mechanism to manage these contact information centrally in the background, and dynamically display them in the website template without frequent code modifications, greatly improving the efficiency of website maintenance.

Contact management in AnQiCMS

In AnQiCMS backend, the contact information settings are concentrated on the "Contact Information Settings" page under the "Backend Settings" menu.Here is a default set of commonly used fields, including contact person, phone number, address, email, WeChat ID, WeChat QR code, as well as international social media accounts such as QQ, WhatsApp, Facebook, and so on.

In addition to these preset fields, the strength of AnQiCMS lies in allowing you to add "custom setting parameters" based on your actual business needs.This means that if you have special contact information, such as a customer service ID for a specific platform, or you want to display a contact channel with a different name, you can flexibly expand it.This information configured in the background can become the data source that can be referenced in your website template.

The core of obtaining contact information in the template{% contact %}Tag

To dynamically display these contact methods in your website template, AnQiCMS provides a special{% contact %}tag. This tag is used tonamespecify the specific contact information you want to obtain.

• Get phone number:If you want to display your contact information on the page, you can use:name="Cellphone"For example, you can output the phone number directly like this:<div>联系电话：{% contact with name="Cellphone" %}</div>To allow users to directly dial a number, you can embed this value into<a>label'shrefthe attribute:<p>咨询热线：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>

• Display the email address:The method of obtaining the email address is similar to the phone, usingname="Email"Just do it.<div>联系邮箱：{% contact with name="Email" %}</div>Similarly, to make it convenient for users to click to send an email, it can be combinedmailto:Protocol usage:{% contact userEmail with name="Email" %} <p>发送邮件至：<a href="mailto:{{ userEmail }}">{{ userEmail }}</a></p>Here we first assign the email address touserEmailthe variable, and then use it in the link to make the code clearer.

• Display WeChat information:AnQiCMS supports displaying WeChat ID text and QR code. To display your WeChat ID text, you can usename="Wechat":<div>微信号：{% contact with name="Wechat" %}</div>If you need to display a WeChat QR code image on the page, you can usename="Qrcode". This value is usually used as<img>label'ssrcattribute:<img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 120px; height: 120px;" />Thus, the QR code image you upload on the backend can be loaded and displayed correctly.

Handle custom contact information

AnQiCMS flexibility allows you to add custom contact information according to your actual needs. Suppose you add a new custom parameter in the "Contact Information Settings" backend, its "parameter name" is set toWhatsAppAnd in the "Parameter Value" field, you filled in your WhatsApp account or link. Then in the template, you can directly use this custom parameter name to get the corresponding value: <div>WhatsApp：{% contact with name="WhatsApp" %}</div>This allows you to easily display any background-defined, business-needs-compliant contact information on the website, whether it be a social media homepage link, an online customer service link, or other personalized contact methods.

Practical Scenarios and Techniques

These contact details are usually placed in the footer, top navigation bar, sidebar, or a separate "Contact Us" page on the website.When building these areas, HTML tags and CSS styles can be combined to make the information both beautiful and practical.For example, a typical website footer may include copyright information and main contact details:

<footer>
    <div class="container">
        <p>版权所有 © {% now "2006" %} 您的公司名称.</p>
        <p>地址：{% contact with name="Address" %}</p>
        <p>电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>
        <p>邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
        {% contact wechatAccount with name="Wechat" %}
        {% if wechatAccount %}
        <p>微信：{{ wechatAccount }}</p>
        {% endif %}
    </div>
</footer>

If your website supports multilingual, or has multiple site instances, and you need to call specific site contact information, you can{% contact %}the tag withsiteIdParameters are used to specify the site ID. However, in most single-site scenarios, AnQiCMS will automatically recognize the current site settings and no additional specification is required.

Some reminders.

When developing templates and content management, there are some points to note.Firstly, please make sure that all the contact information that needs to be displayed is filled in accurately in the "Contact Information Settings" of the AnQiCMS background.If the background data is empty, the template will naturally not display any content when called.Secondly, the Go language template syntax is case-sensitive, be sure to ensurenameThe parameter field name must match the field name defined in the AnQiCMS document or backend (for exampleCellphoneinstead ofcellphone)

by mastering{% contact %}The use of tags, you can easily manage and display your contact information on the AnQiCMS website, providing users with a convenient communication channel, thereby enhancing the professionalism and user-friendliness of the website.

Frequently Asked Questions (FAQ)

1. Ask: I have used in the template{% contact %}tag, but there is no contact information displayed on the page, what is the matter?Answer: Please first check the AnQiCMS backend "Backend Settings" -> "Contact Information Settings" page to confirm whether you have filled in the corresponding contact information.If the background information is empty, the template will not be able to retrieve any content.Next, please check the template innameIs the spelling of the parameter correct, for example should it be usedname="Cellphone"instead ofname="cellphone"Because AnQiCMS template tags are case sensitive.

2. Ask: Can I display multiple types of contact information on a single page? For example, phone, email, and WeChat QR code?Answer: Of course you can.{% contact %}Tags can be used multiple times, each specifying differentnameParameters can be used to obtain the corresponding contact information. You can call these tags individually at any position according to the page layout and combine them to display.

3. Ask: If I add a custom contact method, but don't know how to write itsnameparameter in the template?Answer: When you add a custom parameter in the "Contact Information Settings" backend, you will specify a "parameter name" (such as "SalesEmail" or "LineAccount"). In the template, you directly use this "parameter name" asnameThe value of the parameter can be. AnQiCMS usually processes it as camel case naming, so even if you enter “sales email” on the background, the template should try to use it.name="SalesEmail"to call.