After creating and setting up your Assistant, you can follow these steps to add an Embedded Chat to your WordPress and Divi site:
How to Add Chat Bubble to WordPress on Divi Theme
Step 1: Copy the Code Snippet for the Chat Bubble
Log in to https://app.noform.ai/sign-in
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Chat bubble" and click "Copy code" to copy your Assistant's chat bubble code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2: Access your WordPress Dashboard
You can log in to https://wordpress.com and create a new site or select your existing site.
Go to the website admin dashboard.
Step 3: Navigate to WordPress Theme File Editor
Go to the "Appearance" option and click on "Theme File editor".
Step 4: Add Chat Bubble Code Snippet to Your Website and Update Theme File
Paste the code chat above the closing </body> tag.
Click "Update file" and refresh your website once you are done.
Step 5: Check Your Website
Visit your webpage to ensure that the chat snippet is displaying correctly. Double-check the code for errors and ensure it is placed correctly. If there are any issues, ensure it is placed in the correct location.
How to Add Embedded Chat to WordPress on Divi Theme
Step 1: Copy the Code Snippet for Embedded Chat
Log in to https://app.noform.ai/sign-in
Click on your Assistant to open its settings
Go to the "Customization" tab
Open the "Installation" tab
Select "Embedded chat" and click "Copy code" to copy your Assistant's chat bubble code snippet.
📝 A snippet is a JavaScript <script> element that will load and display the chat bubble on your website.
Step 2: Access your WordPress Admin Dashboard
You can log in to https://wordpress.com and create a new site or select your existing site.
Go to the website admin dashboard.
Step 3: Navigate to the Divi Settings
Go to the "Divi" settings.
Click "Theme Options".
Open the Integration tab.
Step 4: Add Embedded Chat Code Snippet to Your Website
Paste the chat code snippet to the "Add code to the <head> of your blog" block editor.
📝 We recommend choosing a <head> location so your chat will appear on all your web pages.
Step 5: Save and publish the Custom Chat Code
Scroll to the bottom of the page and click "Save Changes" button to save all changes.
Step 6: Check Your Website
Visit your webpage to ensure that the chat snippet is displaying correctly. Double-check the code for errors and ensure it is placed correctly. If there are any issues, ensure it is placed in the correct location.
Troubleshooting
If you encounter any issues with the chat code (e.g., it’s not displaying or rendering incorrectly), please consider the following troubleshooting tips:
The chat code may fail to render if modified after being pasted into a website or webpage.
WordPress code optimization plugins (such as WP Rocket, WP Fastest Cache, Autoptimize, and WP Super Minify) can sometimes interfere with custom code. Add NoForm to the exceptions list within your plugin's settings to resolve this.
Your NoForm.ai subscription may have expired. Please renew your subscription to continue using your AI Assistant.
If you have any questions, please contact our Support team via live chat or email.