How to obtain and display the contact information (such as phone, email, WeChat) set in the template?

In website operation, clearly displaying contact information is crucial for enhancing user trust and promoting interaction.Whether consulting products, seeking support, or engaging in business cooperation, convenient contact channels can greatly improve conversion rates.AnQiCMS (AnQiCMS) understands this and provides flexible and powerful features, allowing you to easily obtain and display various contact information in website templates.

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

Step 1: Set your contact information in the background

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 pre-set some commonly used contact fields for you, such as:

  • Contact Person
  • Phone Number
  • Contact Address
  • Contact Email
  • WeChat ID
  • WeChat QR Code
  • QQ
  • as well as some social media such as:WhatsApp, Facebook, Twitter, TikTok, Pinterest, LinkedIn, Instagram, YouTubeetc.

You only need to fill in your actual information in the corresponding input boxes.For example, enter your company phone number in the 'Contact Phone' field, the customer service email in the 'Contact Email', 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 section".Customize settings parametersFeature. 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' (which is the content you want to display) and add 'remarks' for future identification.

After completing all information entry and adjustments, please make sure to click 'Save'. This will successfully store your contact information in the Anqi CMS.

Step 2: Call and display in the template

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

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

contactThe basic usage of the label is:{% contact 变量名称 with name="字段名称" %}.The 'variable name' is optional. If you do not define it, the label will output the field value directly; if you define the variable name, you can use this variable to call it in subsequent code.nameParameters, which are the field names you see when setting 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 Information

You may wish to display the company's contact information 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:..."It is an HTML standard that allows you to make a phone call directly on the phone, after clicking.rel="nofollow"It is a practice that is friendly to search engines.

2. Display contact email

Similarly, displaying your corporate email is also 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. Display 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 the WeChat QR code image

For the WeChat QR code, you need to treat it as an image ofsrcAttribute to display.

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

5. Display your customized contact information.

If you have customized a field named in the background,CustomerHotlineThe parameter, used to display customer service hotline, is also easy to call in the template:

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

6. Integration of multiple contact methods

Generally, we would concentrate on displaying various contact methods in the footer of the website or on 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>

Here we used{%- if ... %}Make a judgment to ensure that the corresponding contact information is set on the back-end before it is displayed on the front-end. This avoids blank spaces or broken links and also makes the code more robust.{%- endif %}of-The symbol is used to remove extra blank lines generated by tags, making the code rendering more tidy.

Useful tips

  • Choice of placementThe 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 managementIf you use the multi-site feature of AnQi CMS to manage multiple websites and want to call the contact information of a specific site,contacttag.siteId="站点ID"parameter, such as{% contact with name='Cellphone' siteId="2" %}This way, it can accurately obtain the contact information of different sites.
  • Real-time updateThe backend settings and frontend display of AnQi CMS are closely related.When you modify the contact information in the background, the front-end page usually updates immediately without the need for complex cache cleaning operations, unless you have enabled a special static page cache strategy.
  • Ease of use and consistencyKeep your contact information consistent across the entire site, which helps build brand credibility.At the same time, ensuring that this information is easy for users to find and use is crucial for enhancing the user experience.

Through the flexible settings and powerful template tags provided by Anqi CMS, managing and displaying your website contact information has become simpler and more efficient than ever.

Common Questions (FAQ)

1. I have set the contact information in the background, why isn't it displayed on the front-end page?

This is usually caused by the following reasons:

  • Template tags not added or used incorrectly:Please check if the template file has been added correctly in your{% contact with name="字段名称" %}labels, andnamethe parameters are exactly the same as the field names set in the back-end (including case).
  • The back-end settings have not been saved:Ensure that you modify the information after making changes on the "Contact Information Settings" page in the background.