How to obtain and display the contact information configured on the back-end, such as phone numbers, email addresses, WeChat QR codes, and other diversified information?

AnQiCMS (AnQiCMS) is an efficient and flexible content management system that performs well in helping enterprises display their brand image and provide convenient communication channels.For any website, having clear and accessible contact information is the key to building trust with users and promoting cooperation.AnQi CMS deeply understands this, providing a set of intuitive and powerful functions, allowing you to easily manage and display various contact information such as phone numbers, email addresses, and WeChat QR codes.

Back-end configuration: Central management center for contact information

In Anqi CMS, all contact methods can be managed and configured at a unified entry, which greatly simplifies the work of operation personnel. You can navigate toBackend settings-u003eContact information settingsPage, to add, delete, modify, and query the contact information of the website.

Here, Anqi CMS provides a series of commonly used default settings that meet the basic needs of most websites, including:

  • Contact:This is usually the name you want to publish externally, such as 'Manager Zhang'.
  • Contact Phone:This is a phone number that users can dial directly.
  • Contact address:The address of your company or entity.
  • Contact Email:Users can communicate with you via email.
  • WeChat ID:Users can directly add your WeChat for consultation.
  • WeChat QR Code:Upload the corresponding QR code image for easy scanning and addition.

In addition to this basic information, the strength of Anqi CMS lies in its high customizability.If you have other specific contact channels such as WhatsApp, Skype, Telegram, or need to display links to social media such as Facebook, Twitter, LinkedIn, you can flexibly add them through the "Custom Setting Parameters".

When adding custom parameters, you need to set:

  • Parameter name:This is the unique identifier for the front-end template, it is recommended to use English, for exampleWhatsApporFacebookLink.
  • Parameter value:The corresponding contact information or link address.
  • Note:Help you understand the purpose of the parameter description, it will not be displayed on the front end.

In this way, you can ensure that all important contact channels are properly managed and always ready to be displayed on the front desk.

Front-end template call: make contact information omnipresent.

Once the background configuration is complete, the next step is to call and display this information on the website front-end template. AnQi CMS provides a concise and clear interface.contactTemplate tags make this process extremely simple.

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

Among them,nameThe parameter corresponds to the field name you defined in the "Contact Settings" on the backend (such asCellphone/Email/Qrcodeor custom by youWhatsApp）。You can choose to directly output the value of this field, or you can assign it to a variable for more flexible use in the template.

Let's see how to apply through some specific examples:

  • Show contact phone number:

    <p>联系电话：<a href="tel:{% contact with name="Cellphone" %}">{% contact with name="Cellphone" %}</a></p>

    Here, we will embed the phone number directly intotel:the link, and users can make a call by clicking on their mobile phones.

  • Display contact email:

    <p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>

    Similar to the phone number, an email address can also be made intomailto:a link for users to click and send emails.

  • Display the WeChat QR code:

    <div class="wechat-qrcode">
    <p>扫码添加微信：</p>
    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" style="width: 120px; height: 120px;">
</div>

    WeChat QR codes are usually displayed in image form, and users can scan and add after scanning.

  • Display custom WhatsApp contact information:Suppose you have customized a namedWhatsAppthe parameter.

    <p>WhatsApp：{% contact with name="WhatsApp" %}</p>

    If your WhatsApp parameter value is a link, it can also be handled like other links:

    <p>WhatsApp：<a href="{% contact with name="WhatsApp" %}" target="_blank">点击聊天</a></p>

These contact details are usually placed at the footer, sidebar, or a dedicated "Contact Us" page on the website to ensure that users can find them easily.

A practical case: Build a comprehensive footer contact information area

Combining the above methods, you can easily build a footer area with multiple contact methods to enhance user experience:

<div class="footer-contact-info">
    <h3>联系我们</h3>
    <p>
        <span>联系人：</span>
        <span>{% contact with name="UserName" %}</span>
    </p>
    <p>
        <span>电话：</span>
        <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
    </p>
    <p>
        <span>邮箱：</span>
        <a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a>
    </p>
    <div class="social-media">
        {% if contact with name="Wechat" %}
        <div class="wechat-box">
            <span>微信：</span>
            <span>{% contact with name="Wechat" %}</span>
            <img src="{% contact with name="Qrcode" %}" alt="微信二维码" class="qrcode-small">
        </div>
        {% endif %}

        {% if contact with name="WhatsApp" %}
        <p>
            <span>WhatsApp：</span>
            <a href="{% contact with name="WhatsApp" %}" target="_blank" rel="nofollow">点击聊天</a>
        </p>
        {% endif %}

        {% if contact with name="Facebook" %}
        <p>
            <span>Facebook：</span>
            <a href="{% contact with name="Facebook" %}" target="_blank" rel="nofollow">访问主页</a>
        </p>
        {% endif %}
        <!-- 更多社交媒体或自定义联系方式 -->
    </div>
    <p>
        <span>地址：</span>
        <span>{% contact with name="Address" %}</span>
    </p>
</div>

In this example, we also added{% if ... %}Ensure that the content is displayed on the front end only when a contact method is configured in the background, to avoid blank links or incomplete information.In this way, Anqi CMS helps you manage and display your website's contact information to the utmost, thereby better serving your users with its high flexibility and ease of use.

Frequently Asked Questions (FAQ)

1. Why is there no display on the front-end website even though I have set the contact information in the background?This usually has several reasons. First, make sure you have filled in and saved the information correctly in the "Background Settings" > "Contact Information Settings". Second, check your website template