How to configure and display the global contact information of the website, such as phone number, address, WeChat QR code?

In website operation, clearly and accurately displaying contact information is a key factor in building user trust and improving service efficiency.Whether it is a phone number, address, email, or the popular WeChat QR code, AnQiCMS provides a flexible and convenient way to configure and manage these global information, ensuring they can be presented efficiently on the website.

Backend configuration: centrally manage your global contact information

To centrally manage this information, you need to log in to the AnQiCMS backend management interface. After logging in, please navigate to the left menu bar of theBackend settingsSelect thenContact information settingsOption. This is the collection of all your website's contact information.

In the "Contact Information Settings" area, you will see a series of preset contact information input boxes, such as contacts, phone numbers, contact addresses, contact email, and even including WeChat ID and WeChat QR code.These fields are designed to meet the basic needs of most websites, and you can fill them in one by one according to your actual situation.For example, fill in your customer service phone number in the 'Contact Phone' field, the specific address of the company in the 'Contact Address', and upload the QR code image of the prepared WeChat service number or personal number to the 'WeChat QR Code' field.

It is worth mentioning that if the default fields provided by the system do not fully meet your website needs, such as when you need to add WhatsApp contact information, Telegram group links, or other specific social media accounts, AnQiCMS also provides flexibleCustom settings parametersFunction. You can click "Add Custom Parameter" to define a clear "Parameter Name" (such asWhatsApp), then fill in the corresponding contact information or link, and add a note for future reference.After configuration is complete, please click the save button at the bottom of the page to ensure that all your changes take effect in a timely manner.

Front-end display: Make contact information accessible on the website

Once the background contact information is configured, the next step is to display them on the website's frontend page.The powerful template tag system of AnQiCMS makes this process very intuitive, without the need for complex code development, you can easily call this information.

The core is to use the name ofcontactThe template tag. This tag is specifically used to extract the information you fill in the background "Contact Information Settings". Its basic usage is{% contact 变量名称 with name="字段名称" %}If you do not need to assign information to a variable, you can also write it directly{% contact with name="字段名称" %}Output the content directly

The following are some examples of common contact methods:

• Display contact phone number:For easy direct dialing by users, especially mobile users, you can use it like thiscontactto display the phone number and make it clickable:

  <a href="tel:{% contact with name='Cellphone' %}" rel="nofollow">
      {% contact with name='Cellphone' %}
  </a>
  

  here,name='Cellphone'will call the contact number you entered in the background.

• Display contact address:The physical address of the company is usually displayed in the footer or contact us page, and can be directly accessed:

  <span>地址：{% contact with name='Address' %}</span>
  

• Display WeChat QR code:The WeChat QR code needs to be placed as an image,<img>label'ssrcIn the properties. Please make sure you have uploaded the QR code image in the background:

  <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
  

  If you need to add explanatory text below the image, you can also call the WeChat ID field at the same time:

  <img src="{% contact with name='Qrcode' %}" alt="微信二维码" />
  <p>微信号：{% contact with name='Wechat' %}</p>
  

• Display custom parameters:If you have added a custom parameter in the background, such as one namedWhatsAppYou can also call it in the same way:

  <span>WhatsApp 联系方式：{% contact with name='WhatsApp' %}</span>
  

Generally, these global contact methods are placed at the top, bottom of the website, or in a separate 'Contact Us' page. In the template file, you just need to place the correspondingcontactThe tag can be embedded into the HTML structure, and AnQiCMS will automatically replace it with the specific content set in the background during page rendering.

Tips to enhance user experience and SEO

Some small details when configuring and displaying contact information can further enhance the user experience and SEO of your website:

• Maintain consistency:Ensure that the contact information displayed at all key locations on the website (such as the header, footer, and contact us page) is consistent. This can enhance customer trust and avoid confusion.
• Mobile optimization:For phone numbers and email addresses, it is recommended to use HTML'stel:andmailto:links. For example<a href="tel:1234567890">1234567890</a>This makes it convenient for mobile users to directly click to dial or send an email.
• Image quality and speed:WeChat QR code and other image information should ensure that the images are clear and load quickly.AnQiCMS provides image format conversion to webp and automatic compression of large images in the content settings, which can help you optimize images.
• Regular review:Regularly check that this contact information is still valid and up-to-date, to avoid user loss or a decline in trust due to outdated information.Accurate contact information also helps search engines better understand and display your company information, such as in local search results.

By AnQiCMS 'Contact Settings' feature andcontactTemplate label, you can efficiently manage and display the global contact information of the website, provide your users with a convenient communication channel, and also add bricks to the professional image of the website.

Frequently Asked Questions (FAQ)

1. Why is the contact information I set in the background not displayed on the website front end?This is usually because you have not added the corresponding information in the website template files.contactLabel to call this information. Please check the template file corresponding to the page where you want to display contact information (such as the header, footer, or contact us page) and ensure that it has been correctly embedded according to the examples in the documentation.{% contact with name='字段名' %}.

2. I uploaded WeChat QR code image, but it is not clear or loads slowly on the front end. What are the solutions?If the QR code image is not clear, it may be due to insufficient resolution of the original image.It is recommended to upload original high-resolution images. If the loading is slow, consider enabling the 'whether to start Webp image format' and 'whether to automatically compress large images' functions in the 'Background Settings' -> 'Content Settings' of AnQiCMS backend, which helps to optimize the image size and improve loading speed.

3. How do I add a Telegram group link if there is no corresponding field on the backend?In this case, you can use the "Custom Setting Parameters" feature at the bottom of the "Contact Information Settings" page. Click "Add Custom Parameter", and set the "Parameter Name" to such asTelegramLinkThen, enter your Telegram group link in the 'Parameter Value' field and add the appropriate remark. Save it, and you can use it in the template.{% contact with name='TelegramLink' %}To call this link.