How to display custom contact information on AnQiCMS (such as WhatsApp, Facebook links)?

In today's digital age, websites are not just platforms for displaying information, but also important bridges for enterprises to connect with customers.Provide diverse contact methods, such as WhatsApp, Facebook links, which can greatly enhance user experience and conversion efficiency.AnQiCMS as a powerful content management system provides a flexible and convenient solution in this regard.

This article will provide a detailed introduction on how to set up and display custom contact information in AnQiCMS, ensuring that your website can communicate with potential customers in the most convenient way.

Step 1: Configure contact information in the background

The 'Contact Information Settings' feature of AnQiCMS is the core function for managing all your contact information.Here, you can fill in the contact information provided by the system by default, or add more personalized contact channels according to your business needs.

1. Access the contact information settings interface:After logging into the AnQiCMS backend, you can find “Backend settingsMenu, click to select。“Contact information settingsThis will take you to a centralized management website where all contact information is located。“

2. Please fill in the built-in contact information：“}]Enter the contact information settings page, where you will see some commonly used default fields, such as:

   • Contactis usually the representative name of your company for external communication.
   • Contact phone numberis the phone number that customers can directly dial.
   • Contact addressYour company address, convenient for customers to understand your geographical location.
   • Contact emailEmail address for receiving customer emails.
   • WeChat IDandWeChat QR codeConvenient for Chinese customers to contact via WeChat.

   These are common elements at the bottom of the website or on the 'Contact Us' page. You can fill in this information according to your actual situation.

3. Add custom contact information (for example, WhatsApp and Facebook):The strength of AnQiCMS lies in its 'Custom Setting Parameters' feature.Although the system has built-in some mainstream social media (such as WhatsApp, Facebook, Twitter, etc.) call fields, you can still supplement or modify them through custom settings.

   Below the "Contact Settings" page, you will find a "Custom settings parametersArea. Here you can add any contact information not on the default list, or add additional descriptions to existing contact information.

   • Add WhatsApp link:If your business widely uses WhatsApp and you want to provide a direct WhatsApp chat link on your website, you can add it like this:

     • Click the "Add" button.
     • "Parameter NameSuggested to fill inWhatsAppLinkClear in name, and it is more convenient to identify when called in the template). Please note that parameter names should be as alphabetical as possible, and the system will automatically convert them to camel case (such asWhatsAppLink)
     • "Parameter valuePlease enter your WhatsApp chat link, for examplehttps://wa.me/国家区号手机号for examplehttps://wa.me/15551234567), or if you are displaying the phone number directly, you can also just enter the phone number.
     • "NotePlease specify the purpose of this parameter, such as 'WhatsApp chat link'.
     • Click to save.

   • Add the link to your Facebook homepage:Similarly, to add a Facebook homepage link:

     • Click the "Add" button.
     • "Parameter NameFill in:FacebookPage.
     • "Parameter valueFill in your Facebook homepage URL, for example:https://www.facebook.com/YourPageName.
     • "NoteFor example, the company's Facebook page.
     • Click to save.

   In this way, you can flexibly add and manage any contact information you need, such as LinkedIn profiles, YouTube channel links, Telegram group links, and so on.

Step 2: Call and display contact information in the front-end template

After completing the background configuration, the next step is to display this information on the website's front page. AnQiCMS provides a special "Contact Information Tag"{% contact %}to achieve this function.

1. Understand{% contact %}Basic usage of the tag:This tag can be used to retrieve any field value configured in the "Contact Information Settings" backend. Its basic syntax is:{% contact 变量名称 with name="字段名称" %}Among them, the variable name is optional. If you do not specify a variable name, the label will directly output the value of the field. If you specify a variable name (such as{% contact myWhatsapp with name="WhatsAppLink" %}Then it can be referenced in subsequent template code{{ myWhatsapp }}to refer to this value

2. Example of calling built-in contact methods:Suppose you want to display contact information and email in the website footer:

   <div class="footer-contact">
       <p>电话: {% contact with name="Cellphone" %}</p>
       <p>邮箱: <a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
   </div>
   

   AnQiCMS'{% contact %}The tag is innameSupports directly in the parametersWhatsApp/FacebookFields of mainstream social platforms.This means that even if you have not added in the 'Custom Setting Parameters', as long as you enter the value in the corresponding text box in the 'Contact Information Settings' backend, you can directly invoke it.If some platforms are not in the default support list, it is necessary to add through 'custom parameter settings'.

3. Example of calling WhatsApp and Facebook links:Based on the configuration we have on the backend:WhatsAppLinkandFacebookPageYou can call them like this in the template and make them clickable links:

   <div class="social-media-links">
       {# WhatsApp 链接 #}
       {% contact whatsappLink with name="WhatsAppLink" %} {# 获取自定义的WhatsApp参数值 #}
       {% if whatsappLink %} {# 判断是否有值，避免显示空链接 #}
           <a href="{{ whatsappLink }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/whatsapp-icon.png" alt="WhatsApp">
               <span>WhatsApp</span>
           </a>
       {% endif %}
   
       {# Facebook 链接 #}
       {% contact facebookPage with name="FacebookPage" %} {# 获取自定义的Facebook参数值 #}
       {% if facebookPage %} {# 判断是否有值，避免显示空链接 #}
           <a href="{{ facebookPage }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/facebook-icon.png" alt="Facebook">
               <span>Facebook</span>
           </a>
       {% endif %}
   
       {# 如果是内置的Facebook字段，且后台已填写，也可以直接这样调用 #}
       {% contact facebookUrl with name="Facebook" %}
       {% if facebookUrl %}
           <a href="{{ facebookUrl }}" target="_blank" rel="noopener noreferrer">
               <img src="/public/static/images/facebook-icon-builtin.png" alt="Facebook">
               <span>Facebook</span>
           </a>
       {% endif %}
   </div>
   

   Please note:

   • srcImage path in the attribute/public/static/images/whatsapp-icon.pngPlease upload the social media icon image to the corresponding template static resource directory according to the actual situation.
   • target="_blank" rel="noopener noreferrer"The attribute is a web-safe **practice, used to open external links in a new window.
   • {% if ... %}Judgment statements are very important, they ensure that the front-end will display the corresponding link only when the contact information is filled in by the back-end, to avoid displaying empty links.

4. Calling under a multi-site environment:If you have used the AnQiCMS multi-site management feature and need to call the contact information of other sites instead of the current site, you can usesiteIdto specify the parameters:{% contact with name="WhatsAppLink" siteId="2" %}(Assuming the site ID is 2)

Case study: Integrating contact information in the website footer

Assuming you want to integrate multiple contact methods in the footer of the website, including phone, email, and custom WhatsApp and Facebook links.

`twig