How to obtain and display the contact information configured in the background, such as phone number, email, WeChat QR code, and other diversified information?

The AnQiCMS (AnQiCMS) is an efficient and flexible content management system that excels in helping enterprises display their brand image and provide convenient communication channels.For any website, clear and accessible contact information is the key to building trust with users and promoting cooperation.The company is well-versed in this field and provides a set of intuitive and powerful features, allowing you to easily manage and display contact information such as phone numbers, email addresses, WeChat QR codes, and more.

Background configuration: Central management center for contact information

In the Auto CMS, all contact methods can be managed and configured in a unified entry, which greatly simplifies the work of operators. You can navigate toBackend settings-Contact information settingsPage, to perform add, delete, modify, and query operations on 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:通常是您希望对外公布的姓名，如“张经理”
  • Contact phone number:方便用户直接拨打的电话号码。
  • Contact address:您的公司或实体地址。
  • Contact email:用户可以通过邮件与您沟通。
  • 微信号：EnglishUsers can directly add your WeChat for consultation.
  • WeChat QR Code:Upload the corresponding QR code image for easy scanning and addition by users.

In addition to this basic information, the strength of Anqi CMS lies in its highly customizable nature.If you have any other specific contact channels, such as WhatsApp, Skype, Telegram, or need to display links to social media platforms like 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 front-end template usage, it is recommended to use English, for example.WhatsApporFacebookLink.
  • Parameter value:Corresponding contact information or link address.
  • Note:Help you understand the purpose of the parameter, it will not be displayed on the front end.

This way, you can ensure that all important contact channels are properly managed and always ready for display on the front desk.

Front desk template call: Make contact information omnipresent

Once the background configuration is completed, the next step is to call and display this information on the website front-end template. Anqi CMS provides a concise and clearcontactTemplate tags make this process extremely simple.

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

Among them,nameThe parameter corresponds to the field name you defined in the "Contact Information Settings" on the backend (such asCellphone/Email/Qrcodeor a custom oneWhatsApp）。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 it 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 the user can dial by clicking on the phone.

  • Display contact email:

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

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

  • Display WeChat QR code:

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

    The WeChat QR code is usually displayed in image form, and users can scan it to add.

  • Display the custom WhatsApp contact information:Assuming you have customized a name in the backgroundWhatsAppThe 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 methods are usually placed at the footer, sidebar, or a dedicated "Contact Us" page on the website to ensure that users can find them conveniently at any time.

Practice Case: Build a comprehensive footer contact information area

Combine the above methods to easily build a footer area with various 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 have also added{% if ... %}Ensure that the corresponding content is displayed on the front end only when a contact method is configured in the background, to avoid blank links or incomplete information.Through this way, AnQi CMS helps you manage and display your website's contact information to the fullest extent with its high flexibility and ease of use, thereby better serving your users.

Common Questions (FAQ)

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