As an experienced security CMS website operator, I am well aware that effectively integrating key contact information into the website is crucial for enhancing user experience and promoting business conversion.WhatsApp is a widely used instant messaging tool globally, its convenience making it an ideal bridge for enterprises to communicate with customers.AnQi CMS, with its high flexibility and customizability, can easily integrate WhatsApp contact methods.
This detailed article will guide you on how to gradually add and optimize the display of WhatsApp contact information on the Anqi CMS website, ensuring that your customers can get in touch with you at any time and place.
Configure WhatsApp contact information in Anqi CMS backend
The first step to integrate WhatsApp contact information in AnQi CMS is to configure it centrally in the system's backend management interface.The Anqi CMS provides the "Contact Settings" feature, allowing you to manage various contact information on the website, including custom adding new contact methods.This centralized management approach allows you to update or adjust WhatsApp contact information in one place without modifying multiple pages, greatly enhancing operational efficiency.
To perform this configuration, you first need to log in to the Anqi CMS backend.In the navigation menu on the left, find and click "Background Settings", then select "Contact Information Settings".After entering the contact information settings page, you will see a series of default contact information fields, such as contact person, phone number, and email address.To add WhatsApp, we will use the 'Custom settings parameters' feature.
In the "Custom Setting Parameters" area, click the "Add Parameter" or similar button to create a new custom field. Here, you need to fill in the following information:
- Parameter name:This is the name used for template calls.Suggest using concise and clear English, for example “WhatsApp”.The system will automatically convert letters to camel case, but for clarity, just use 'WhatsApp' directly.
- Parameter value:In this field, you will enter your WhatsApp contact information. The most common practice is to enter your WhatsApp phone number (with the international dialing code, for example “+1234567890”) or directly enter a WhatsApp chat link (for example “https://wa.me/1234567890By using the chat link, users can directly click to jump to the WhatsApp app or web version to start a conversation, without manually adding contacts, which greatly enhances the user experience.
- Note:This is an optional field, you can fill in some internal notes, such as “Official WhatsApp customer service hotline” or “Marketing department WhatsApp contact information”, so that team members can understand the purpose of this parameter.
After completing this information entry, please make sure to click the save button to make your configuration effective.Now, the WhatsApp contact information has been successfully stored in the Anqi CMS backend, waiting to be called and displayed in the frontend template.
Display WhatsApp contact information in website template
After completing the background configuration, the next step is to actually display this WhatsApp contact information in the front-end template of your website.The AnQi CMS template system is based on a syntax similar to the Django template engine, using specific tags to call background data, which makes it very flexible to display WhatsApp information at any location on the website.
You can choose to display WhatsApp contact information at multiple key positions based on the website design and user flow. Common display areas include:
- Website Header:In
bash.htmlOr add to the main layout file, so that the user can find it quickly on any page of the website. - Website Footer:In
partial/footer.htmlAdd to the bottom of the website as part of the contact information. - Contact Us Page: In
guestbook/index.htmlorguestbook.htmlIn the (or custom single-page template) as the core display of all contact information. - Product detail page or article detail page:In
{模型table}/detail.htmlAdd it, users can directly contact when they have questions about specific products or content.
The template tag for calling the WhatsApp contact number is{% contact with name="WhatsApp" %}To create a clickable WhatsApp chat link for users, you can embed this tag into a<a>(Hyperlink) element within. The following is an example code snippet showing how to implement this in the template:
<a href="https://wa.me/{% contact with name="WhatsApp" %}" target="_blank" rel="noopener noreferrer nofollow">
<img src="{{ system.TemplateUrl }}/images/whatsapp-icon.png" alt="WhatsApp Icon" style="vertical-align: middle; margin-right: 5px; width: 24px; height: 24px;">
{% tr "WhatsAppChat" %}
</a>
In this example:
https://wa.me/{% contact with name="WhatsApp" %}This will dynamically generate a WhatsApp chat link.{% contact with name="WhatsApp" %}The label will be replaced with the content you enter in the 'Parameter Value' field under the 'Contact Information Settings' in the background.target="_blank"Ensure that the link is opened in a new window or tab after clicking to avoid users leaving your website.rel="noopener noreferrer nofollow"This is the recommended practice for external link safety and SEO.noopenerandnoreferrerEnhanced security,nofollowThen tell the search engine that this link does not pass weight, which is a common practice for social or contact links.<img>Label: You can add a WhatsApp icon as needed to enhance visual recognition.{{ system.TemplateUrl }}It will dynamically retrieve the static resource path of the current template to ensure the icon loads correctly.{% tr "WhatsAppChat" %}To support multilingual, this uses Anqi CMS translation tags. You need to configure the translation text in the template'slocalesdirectory for different languages, for example inzh-cn/default.ymlset"WhatsAppChat": "与我们WhatsApp聊天", inen-us/default.ymlset"WhatsAppChat": "Chat on WhatsApp"This ensures that users of different languages can see action calls that match their language habits.
If you want to store a WhatsApp contact information in a variable for more complex logical judgments or multiple references, you can also use the following method:
{% contact userWhatsApp with name="WhatsApp" %}
{% if userWhatsApp %}
<a href="https://wa.me/{{ userWhatsApp }}" target="_blank" rel="noopener noreferrer nofollow">
{% tr "WhatsAppChat" %}
</a>
{% endif %}
This code first assigns the WhatsApp contact information touserWhatsAppthe variable, then through{% if userWhatsApp %}It checks if the variable has a value, and only renders the link if it exists, which increases the robustness of the code.
Optimization and Advanced Application Suggestions
Integrating WhatsApp contact links in Anqic CMS is not just about adding a simple link. As a website operator, you can also take advantage of the powerful functions of Anqic CMS for further optimization and advanced applications:
- Unified management, enhance efficiency:
- Clear call to action:Ensure the text next to the WhatsApp link is clear and encourages users to click.For example, “Click here to consult WhatsApp,” “Send a WhatsApp message,” or “WhatsApp live customer service.”}]Utilizing the multilingual support of AnQi CMS, provide localized call-to-action for users in different countries.
- Combined with multilingual functionality:The AnQi CMS supports multilingual websites. When configuring the display text for WhatsApp links, make full use of
{% tr "YourTranslationKey" %}Label, providing translated WhatsApp contact prompts for different language versions of the website to better serve global users. - Location and visibility:Strategically place WhatsApp contact information at key points where users may need help or consultation.In addition to the common headers and footers, the 'Consult Now' button next to the product page, the end of the service introduction page, and even the floating sidebar buttons, are all good places to increase visibility.
- Tracking and analysis:Although the traffic statistics built into Anqi CMS may not directly track WhatsApp clicks, you can add UTM parameters to the WhatsApp link (for example,
https://wa.me/1234567890?text=Hello_from_AnQiCMS_website), and set up event tracking in external tools like Google Analytics to monitor the click-through rate on WhatsApp links, thereby assessing their effectiveness. - Custom content model integration:For specific business scenarios, if different products or services need to display different WhatsApp contacts, you can consider adding a custom field for storing the WhatsApp contact information of the product or service in the 'Content Model' of Anqi CMS.This way, each product detail page can call its exclusive WhatsApp contact information.
By following these steps and recommendations, you will be able to efficiently and professionally integrate WhatsApp contact information on the Anqi CMS website, providing your users with a convenient communication channel, thereby enhancing customer satisfaction and business conversion rates.The flexibility and centralized management capabilities of Anqi CMS will be an important tool for you to achieve this goal.
Frequently Asked Questions (FAQ)
1. How to make sure my WhatsApp contact link is clickable and can open in a new tab?
Ensure that your WhatsApp link is clickable and can open in a new tab, the key is to use HTML correctly.<a>Labels and their attributes. When creating links in the template, you should usehrefthe attribute to specify a WhatsApp chat link (for examplehttps://wa.me/YOURNUMBERorwhatsapp://send?phone=YOURNUMBER), and addtarget="_blank"the attribute to open in a new tab.