WhatsApp chat widget implementation and troubleshooting

Embedding SleekFlow’s WhatsApp chat widget on your website is straightforward and easy, but we understand that you may encounter some challenges and questions along the way. These FAQs centralize answers to common questions, providing a handy self-service reference to help you troubleshoot errors you may encounter. 

1. How do I embed a WhatsApp widget code into my CMS?

Create a WhatsApp chat widget

Head over to SleekFlow WhatsApp Button Generator and fill up the following:

• Button Name (optional)

• Button Size

• Button Position

• Brand Name

• Brand Subtitle Text

• Phone Number

• Brand Image URL (Optional)

• Welcome Message

• Pre-filled Message

• Call to Action

After filling in the details, enter your business email and press “Get Your Free WhatsApp Button” to get and copy the code, which you can add to your CMS.

Set up on WIX

1. Log into your Wix account for your website. The link to the login page is here.

2. From the displayed websites, click "Select & Edit Site" on the one you want to integrate SleekFlow with.

3. Click "Settings" in the left column of the dashboard, then select "Tracking & Analytics" from the same column. 

4. After that, click "New Tool" and choose "Custom.". 

5. Paste the code in the box and select "Body - end." 

6. When done, click " Apply." 

7. We advise naming the code "SleekFlow Messenger" for better identification. Make sure the toggle is "Enabled."

8. Please publish and check your Wix website! The widget should appear.

Set upon Shopify

Before setting up Shopify with SleekFlow, you'll need access to your Shopify dashboard and the tracking code from your SleekFlow platform.

1. Go to the Shopify Login page by clicking here to log in to your account and access your website control panel.

2. Under your active theme, click "Customize" to edit the preferences.

3. From the navigational pane that appears, click “Edit Code” to begin editing the theme to input the snippet.

4. Navigate yourself through the new link that appears to find Sections. Expand it if it is not open, and open the sub-file footer.liquid.

5. Under the footer.liquid css layout, scroll down to find </footer>.

6. Copy and paste it on your website. Copy and paste the tracking code here before {% schema %}. That is, between </footer> and {% schema %}.

7. Click on Save once pasted. You’ve successfully installed the messaging platform on your Shopify website. Open your site to see the widget on the bottom right-hand side.

Set up on WordPress

1. Log in to your WordPress admin dashboard using your credentials.

2. Click on "My Site" at the top left corner, then select the "WP Admin" tab.

3. Hover over "Plugins" in the left column and click "Add New." 

4. Search for the "Insert Headers and Footers" plugin by WPBeginner, then click "Install Now" and "Activate."

5. Hover over "Settings" in the left menu and select "Insert Headers and Footers."

6. Copy your unique snippet code and paste it into the "Script in Footer" section. Click "Save."

7. Open your website to check the chat widget, which should appear in the bottom-right corner for easy visitor access.

2. How can I fix the issue where I can’t close the WhatsApp button widget?

If you've added the code correctly by following the steps, there shouldn't be an issue. However, this problem is often caused by having two scripts—one in the header and one in the body. 

To fix it, remove the script from the header and leave only the one in the body. This should resolve the issue.

3. My widget is not showing on my website, how can I fix it?

You can check and clear the cache using a plugin or your browser; different CMS may require different methods to clear the cache.

Clearing Cache in Wix

1. Go to the relevant page in your Wix Editor or Editor X.

2. In Wix Editor, click "Pages & Menu" on the left side. In Editor X, click "Pages" at the top.

3. Hover over the page and click the More Actions icon, then select "Settings."

4. Click "Advanced Settings."

5. Toggle the "Manually control caching for this page" option and choose whether to enable or disable caching.

Source: Wix 

6. If enabled, select how often you want the page's cache to reset or choose "Never" to prevent caching.

7. If disabled, the page will be cached automatically. Alternatively, you can clear the cache using your browser settings. 

Clearing Cache in Shopify

For Shopify, you can clear the cache using your browser, and the steps may vary depending on which browser you’re using.

Chrome: Press Ctrl + Shift + Delete (or Cmd + Shift + Delete on Mac). From the Time range drop-down menu, select "All time." Ensure the box next to "Cached images and files" is checked, then click "Clear data."

Firefox: Press Ctrl + Shift + Delete (or Cmd + Shift + Delete on Mac). In the Time range to clear drop-down, select "Everything." Ensure the "Cache" box is checked, then click "Clear now." Close and reopen Firefox.

Safari: Open Safari and click on 'Safari' in the top left corner of your screen. From the dropdown, select 'Privacy,' then click 'Manage Website Data.' Finally, press 'Remove All' to clear the data.

Edge: Press Ctrl + Shift + Delete (or Cmd + Shift + Delete on Mac). Ensure "Cached data and files" is checked, then click "Clear." Close and reopen Microsoft Edge.

Clearing Cache in WordPress

For WordPress, you can clear the cache within the site or by using a plugin. To clear the cache within the site, you can:

1. Click the W icon in the upper left corner of your dashboard to access the Sites page.

2. Select your site from the list of sites.

3. Go to the Server Settings tab on the site overview page.

4. Scroll to the Performance Optimization section.

5. Click Clear All Caches to clear edge and object caches together or clear them individually if needed.

6. Wait for the confirmation message that the caches have been cleared.

Source: WordPress 

Also, plugins work best for all WordPress versions and offer more flexibility for cache management. Some top options to consider are WP Super Cache, W3 Total Cache, and WP Rocket.

4. How can I fix the issue if the WhatsApp button is still not showing the updated version?

The solution is the same as above. Clear your cache to ensure the updated version is displayed.

5. My widget design looks bad on my website, how can I fix it?

You cannot customize the padding or text size of the widget on your own; they are fixed. If the design appears off, you can check for the following potential issues:

• Inspect CSS specificity: Use browser developer tools (e.g., Chrome DevTools) to inspect the affected elements. Look for styles applied by your site that might be overriding the widget’s CSS.

• Namespace isolation: Ensure that your global styles (e.g., for <body>, <p>, <h1>, etc.) aren’t inadvertently affecting the widget’s elements. Adding more specific CSS selectors can help avoid conflicts.

• Override safely: Use more specific CSS selectors targeting only the widget’s elements to prevent interference from other site styles.

6. How can I remove the "Powered by SleekFlow" from my widget?

Premium Plan or above users can contact our Customer Service team for assistance to remove “Powered by SleekFlow” from the chat widget.

7. How can I update the pre-filled message, logo, welcome message, and other details?

To update these elements, go to the SleekFlow WhatsApp Button Generator, fill in the new information (like the pre-filled message, logo, and welcome message), and generate a new code. Once you have the new code, implement it in your CMS to update the widget.