How to retrieve and display the contact information set in the background (such as phone number, email, WeChat)?

It is crucial to clearly display contact information in website operations to enhance user trust and promote interaction.Whether it is to consult products, seek support, or conduct business cooperation, a convenient contact channel can greatly improve the conversion rate.AnQiCMS (AnQiCMS) knows this and provides flexible and powerful features that allow you to easily obtain and display various contact information in website templates.

Next, let's take a look at how to display the contact information set in the background of Anqi CMS, such as phone, email, WeChat, etc., naturally and smoothly on your website.

Step 1: Set your contact information in the background

First, you need to make sure that all contact information has already been entered in the Anqicms backend.This is the place where you can centrally manage important information on your website, making it convenient for you to update and maintain it at any time.

Log in to your Anqi CMS backend, and you will find a menu named “Backend settings”. Click to enter, and you will find a special option called “Contact information settings.

Here, the system has preset some commonly used contact fields, such as:

  • Contact
  • Contact phone number
  • Contact address
  • Contact email
  • WeChat ID
  • WeChat QR code
  • QQ
  • as well as some social media likeWhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtubeetc.

You only need to fill in your actual information in these corresponding input boxes.For example, enter your company phone number in the "Contact Phone" field, enter the customer service email in the "Contact Email" field, and then upload your WeChat QR code image.

If the existing fields do not meet your needs, for example, if you want to add a "corporate customer service hotline" or an "online consultation link", you can also use the bottom "Custom settings parametersFunction. Here you can customize the "parameter name" (this name will be used for template calls, it is recommended to use English or pinyin, such asCustomerHotlinePlease fill in the parameter value (i.e., the content you want to display) and add a note for future identification.

After completing all information entry and adjustments, please make sure to click save, so that your contact information is successfully stored in Anqi CMS.

Step 2: Call and display in the template

When your contact information is set up properly in the background, the next step is to display it in the website template.AnQi CMS provides simple template tags, making this process very easy.

The template of AnQi CMS follows a syntax similar to the Django template engine, variables are enclosed in double curly braces{{变量}}, the label uses single curly braces and percent signs{% 标签 %}. For calling the background settings contact information, we mainly use a very convenient label:contact.

contactThe basic usage of tags is:{% contact 变量名称 with name="字段名称" %}Where the variable name is optional, if you do not define it, the label will directly output the value of the field.If you define a variable name, you can use this variable in the subsequent code.nameParameters, which are the field names you see when you set them up in the background (such asCellphone/Email/Wechat/Qrcode), as well as the parameter names you customize.

Let's look at a few specific examples to understand how to use it:

1. Display contact phone number

You may want to display the company's contact phone number on the website footer or the 'Contact Us' page.

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

here,href="tel:..."Is an HTML standard, click to make a phone call directly on the phone,rel="nofollow"Is a practice that is friendly to search engines.

2. Display contact email

Similarly, displaying your corporate email is also very simple.

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

mailto:The link allows users to click and directly open the email client to send an email.

3. Show WeChat ID

If your business needs to contact through WeChat, you can directly display the WeChat ID.

<p>微信号：{% contact with name='Wechat' %}</p>

4. Display WeChat QR code image

For the WeChat QR code, you need to display it as an image.srcDisplay properties.

<div class="wechat-qrcode">
    <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
    <p>扫码添加微信</p>
</div>

5. Display your custom contact information

If you have customized a name in the backgroundCustomerHotlineThe parameter is used to display the customer service hotline, and it is also convenient to call it in the template:

<p>客服热线：{% contact with name='CustomerHotline' %}</p>

6. Integrate and display multiple contact methods

Generally, we would集中展示多种联系方式 on the footer of the website or a dedicated “Contact Us” page.You can combine the above calling methods to create a clear contact information area.

<div class="contact-info">
    <h4>联系我们</h4>
    <ul>
        <li>电话：<a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">{% contact with name='Cellphone' %}</a></li>
        <li>邮箱：<a href="mailto:{% contact with name='Email' %}">{% contact with name='Email' %}</a></li>
        <li>微信：{% contact with name='Wechat' %}</li>
        {%- if contactWhatsapp = {% contact with name='WhatsApp' %} %} {# 检查WhatsApp是否存在 #}
            <li>WhatsApp：<a href="https://wa.me/{% contact with name='WhatsApp' %}" target="_blank">{% contact with name='WhatsApp' %}</a></li>
        {%- endif %}
    </ul>
    {%- if contactQrcode = {% contact with name='Qrcode' %} %} {# 检查微信二维码是否存在 #}
    <div class="wechat-qrcode-container">
        <img src="{{ contactQrcode }}" alt="微信二维码" />
        <p>扫码添加微信</p>
    </div>
    {%- endif %}
</div>

We used here{%- if ... %}Make a judgment to ensure that the corresponding contact information is set in the background before it is displayed on the front end, to avoid blank spaces or broken links, and also make the code more robust.{%- endif %}of-The symbol is used to remove the extra blank lines generated by the tag, making the code rendering cleaner.

Practical tips

  • Choice of placement.The website footer, header navigation, sidebar, or a standalone "Contact Us" page are all ideal locations to display contact information.Choose the place that is easiest to access based on the design of your website and user habits.
  • Multi-site management: If you use Anqi CMS's multi-site feature to manage multiple websites and want to call the contact information of a specific site, you can do so by specifying thecontactthe tag withsiteId="站点ID"parameters such as{% contact with name='Cellphone' siteId="2" %}This way, you can accurately obtain contact information from different sites.
  • Real-time update: The backend settings and frontend display of AnQi CMS are closely related.After you modify the contact information in the background, the front-end page will usually update immediately, without the need for complex cache cleaning operations, unless you have enabled a special static page cache strategy.
  • Usability and consistencyKeep your contact information consistent across the entire site, which helps establish brand credibility.At the same time, ensure that this information is easy for users to find and use, which is the key to improving the user experience.

By using the flexible settings and powerful template tags provided by AnQi CMS, managing and displaying your website's contact information has become unprecedentedly simple and efficient.

Frequently Asked Questions (FAQ)

1. I have set up the contact information in the background, why is it not displayed on the front page?

This is usually caused by the following reasons:

  • The template tags are not added or used incorrectly:Please check if your template file has added correctly{% contact with name="字段名称" %}the tags, andnamethe parameter is consistent with the field name set in the background (including case).
  • The background setting has not been saved:Make sure you modify the information after changing it on the "Contact Information Settings" page in the background