How to display custom contact information on the website frontend, such as WhatsApp or Facebook links?

In today's digital age, making it easy for customers to find and contact you is the cornerstone of any successful website.Whether it is to provide customer support, promote sales, or build community interaction, a clear and visible contact method is crucial.Fortunately, Anqi CMS provides a set of intuitive and powerful features that allow you to easily display various custom contact methods on the website front end, such as WhatsApp or Facebook links, ensuring that your customers can always communicate with you conveniently.

Next, we will step by step introduce how to achieve this goal in Anqi CMS.

Step one: Back-end configuration - the 'home base' of contact information.

Firstly, we need to enter the Anqi CMS backend management interface, find the "Backend Settings" menu in the left navigation bar, and click to enter the "Contact Information Settings" option.This is the core area where you manage all the contact information for your website.

Here, you will see a series of preset contact information fields, such as contact person, phone number, address, email, WeChat ID, and WeChat QR code, etc.Even better, Anqi CMS has built-in direct support for some mainstream social platforms, such as WhatsApp, Facebook, Twitter, Tiktok, Pinterest, Linkedin, Instagram, Youtube, and so on.You just need to fill in your WhatsApp link in the corresponding field (for examplehttps://wa.me/您的WhatsApp号码）or Facebook page URL is fine.

If your needs are more specific, or if you want to add a contact method that is not on the default list, such as a special online customer service link, or if you want to display a social media link with a different name, the "Custom Settings Parameters" feature can come in handy. You just need to click "Add Custom Parameter", enter an easily recognizable "Parameter Name" (such asMyCustomChat) and the corresponding "parameter value" (which is the actual link or text), plus a "note" for easy memory, save it.This "parameter name" is the key to calling this information in the website template later.

After completing the information entry, click save, your contact information has already been safely stored in the system.

Step 2: Front-end display - make the information accessible

After setting up the contact information, the next step is to display them in a suitable position on the website front page.The Anqi CMS adopts a syntax similar to the Django template engine, allowing you to easily display this information to visitors with concise template tags.

The core of displaying contact information is to usecontacttags. This tag allows you to call the corresponding value according to the "parameter name" set in the background.

1. Show built-in WhatsApp or Facebook link

Assuming you have already filled in the complete link addresses for the "Contact Information Settings" fields such as "WhatsApp" and "Facebook" in the backend. Now, if you want to display these links in the footer or sidebar of the website, you can write the template code like this:

{# 在后台的“WhatsApp”字段填写：https://wa.me/1234567890 #}
{# 在后台的“Facebook”字段填写：https://www.facebook.com/yourpage #}

<div>
    <a href="{% contact with name='WhatsApp' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp">
        <span>通过WhatsApp联系我们</span>
    </a>
</div>

<div>
    <a href="{% contact with name='Facebook' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/facebook-icon.png" alt="Facebook">
        <span>访问我们的Facebook主页</span>
    </a>
</div>

Please note,imgin the labelsrcThe path needs to be adjusted according to the actual location where the icons are stored.target="_blank" rel="noopener noreferrer"It is a good practice in web development to open links in a new window and enhance security.

2. Display custom contact information

If you previously created a name in the backgroundOnlineChatLinkCustom parameters, and you have filled in your online customer service link, you can call it like this:

{# 假设您在后台自定义参数中设置了：参数名=OnlineChatLink，参数值=https://chat.example.com/ #}

<div>
    <a href="{% contact with name='OnlineChatLink' %}" target="_blank" rel="noopener noreferrer">
        <img src="/public/static/images/chat-icon.png" alt="在线客服">
        <span>在线咨询</span>
    </a>
</div>

3. The location to place the template code

These code snippets can be placed in multiple key positions on the website. The most common ones are in the global page header (usually corresponding toheader.htmltemplate file) or the footer (usually corresponding tofooter.htmlIn the template file, ensure that each page can be displayed.

For an independent page like 'Contact Us', you can edit the single page content in the background under 'Page Resources' -> 'Page Management', and directly insert these links in the visual editor. Or, if you want to finely control the display layout, you can do so in the template file corresponding to the single page (for example,page/detail.htmlMake edits within the parenthesis.

To keep the template structure clear and easy to maintain, you can encapsulate these code snippets for contact information./templatein a custom template file under the directory, for example, create onepartial/contact-info.htmla file, and then through{% include "partial/contact-info.html" %}the method in the place where it is needed.

Summary

By using the intuitive backend settings and flexible template tags of AnQi CMS, displaying custom contact information becomes extremely simple. Whether you want to add popular social media links or need to customize contact entries for specific requirements, An