How to retrieve and display the contact information, phone number, address, and email of the website?

In website operation, a clear and easily searchable contact method is a key factor in establishing user trust and promoting communication conversion.Whether it is seeking a partner for cooperation or a user in need of help, you can quickly find you through the contact information provided on the website.AnQiCMS provides flexible and convenient contact management and display functions, allowing you to easily obtain and display all kinds of contact information including contacts, phone numbers, addresses, emails, and more.

1. Manage your contact information centrally in the background

The Anqi CMS centralizes the contact information of the website, making it convenient for you to configure and update it uniformly. All contact information related to the website can be found in the "Backend settings" menu under the "Contact information settingsConfigure the page.

On this page, you will see a series of preset common contact fields, such as:

  • Contact (UserName): This is usually the name you want to display to others.
  • Contact Phone (Cellphone): This is your primary contact phone number, which users can call by clicking.
  • Contact Address (Address): The detailed address of the company, convenient for navigation or sending items.
  • Contact Email (Email): The address for receiving user emails.
  • WeChat account: Convenient for users to add your personal or corporate WeChat account.
  • WeChat QR code (Qrcode): Directly display the QR code, users can scan and add.
  • In addition, there are also various social media contact methods such as QQ, WhatsApp, Facebook, Twitter, Tiktok, etc.

If these default fields do not meet your business needs, AnQi CMS also provides powerfulCustom settings parametersFunction. You can add any new contact methods as needed, such as 'customer service hotline', 'online consultation link', or a specific business person in charge.When adding custom parameters, you need to set a "parameter name" as the identifier for calling in the template (recommend using English or pinyin, such asServiceHotlinePlease fill in the corresponding "parameter value" (actual contact information). This greatly enhances the flexibility of contact information display.

Secondly, call and display the contact information in the front-end template.

After you have completed the setup of the contact information in the background, the next step is to call and display it on the front page of the website. Anqi CMS provides a special template tag for this——contactLabel, its usage is very intuitive and flexible.

contactThe basic syntax of the tag is:{% contact [变量名称] with name="字段名称" %}.

  • nameThe parameter is the core you need to pay attention to, it corresponds to the English identification of the field in the background "Contact Information Settings" (for exampleUserName/Cellphone/Address/EmailOr it could be the parameter name you set when customizing.
  • You can optionally specify a 'variable name' for the contact information you obtain (for example,myContactPerson)，so that the template code in subsequent templates can pass through{{myContactPerson}}Come to refer to this value multiple times to make the code more tidy. If it is not necessary to repeat the reference, you can also omit the variable name and output it directly in the label.

Let's look at some commonly used examples:

  1. Display contact name:If you want to display the contact name on the page, you can call it like this:

    {% contact with name="UserName" %}

    Or assign it to a variable and output it:

    {% contact myContactPerson with name="UserName" %}
<span>联系人：{{ myContactPerson }}</span>

  2. Display contact phone number and add a dialing link:The contact phone number should not only be displayed, but also usually need to be convenient for users to click and dial directly.

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

    here,rel="nofollow"The attribute helps tell the search engine that this is a clickable link but not recommended.

  3. Display the company address:Display your detailed address directly on the page:

    {% contact with name="Address" %}

  4. Display the contact email and add an email link:Similar to the phone number, the email is often set to be clickable:mailtolinks.

    {% contact contactEmail with name="Email" %}
邮箱：<a href="mailto:{{ contactEmail }}" rel="nofollow">{{ contactEmail }}</a>

  5. Display the WeChat QR code:If you upload a WeChat QR code, it can be displayed in the following way:

    {% contact wechatQR with name="Qrcode" %}
{% if wechatQR %} {# 建议添加判断，如果后台未上传二维码则不显示 #}
微信扫码：<img src="{{ wechatQR }}" alt="微信二维码" style="width: 120px; height: 120px;">
{% endif %}

  6. Call a custom contact method (take WhatsApp as an example):Assuming you have customized one in the backgroundWhatsAppfield.

    {% contact whatsappNumber with name="WhatsApp" %}
{% if whatsappNumber %}
WhatsApp：<a href="https://wa.me/{{ whatsappNumber }}" target="_blank" rel="nofollow">{{ whatsappNumber }}</a>
{% endif %}

    Here pass{% if whatsappNumber %}Determine, ensure that the front-end will display this part of the content only when the WhatsApp number is set in the background, to avoid displaying empty content.

Integrate contact information into the website page

Generally, the contact information of a website is displayed in the footer, the "Contact Us" page in the top navigation bar, or as a separate sidebar module.You can combine the above tags based on the overall design of the website and user habits.

This is an example of integrating multiple contact methods into a 'Contact Us' area:

<div class="contact-info-block">
    <h3>联系我们</h3>
    <ul>
        <li>
            <strong>联系人：</strong> {% contact with name="UserName" %}
        </li>
        <li>
            <strong>电话：</strong> <a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a>
        </li>
        <li>
            <strong>地址：</strong> {% contact with name="Address" %}
        </li>
        <li>
            <strong>邮箱：</strong> <a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a>
        </li>
        {% contact wechatAccount with name="Wechat" %}
        {% if wechatAccount %}
        <li>
            <strong>微信号：</strong> {{ wechatAccount }}
        </li>
        {% endif %}
        {% contact wechatQR with name="Qrcode" %}
        {% if wechatQR %}
        <li>
            <strong>微信扫码：</strong>
            <img src="{{ wechatQR }}" alt="微信二维码" style="width: 100px; height: 100px;">
        </li>
        {% endif %}
        {% contact customHotline with name="ServiceHotline" %} {# 假设后台自定义了"ServiceHotline" #}
        {% if customHotline %}
        <li>
            <strong>客服热线：</strong> {{ customHotline }}
        </li>
        {% endif %}
    </ul>
</div>

By using the above method, you can easily manage and display the various contact information of the website in Anqi CMS, providing users with a convenient communication channel.Flexible backend configuration and simple template call tags enable website maintainers to efficiently respond to business changes, update contact information at any time, and maintain the accuracy of website information.

Frequently Asked Questions (FAQ)