After creating and setting up your Assistant, you can either follow our instructions in the "Guide for WordPress" found under the "Customization" tab, or you can follow these steps to add a Chat code to your WordPress site:
How to Add Chat Bubble to WordPress Default Theme
Step 1: Copy 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: Install and activate the free "Insert Headers and Footers" plugin by WPCode
Install and activate the free Insert Headers and Footers plugin by WPCode.
Step 3: Navigate to the Code Snippets of Your WordPress Dashboard
On the left-hand side of your dashboard, navigate to Code Snippets → Header & Footer.
Step 4: Paste Bubble Code into the Header or Footer Box
Paste the code into the Header or Footer box and click the “Save Changes” button.
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 defined in Step 4 or contact us for support.
How to Add Embedded Chat to WordPress Default 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 embedded chat 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 website.
Go to the website admin dashboard.
Step 3: Navigate to the Page Editor
Go to the "Pages" section, open the editor for the desired website page, or select "Add New Page".
Step 4: Add Custom HTML Block
Inside the Page editor, navigate to the section where you want to embed a chat and click the plus "+" button.
Type "html" into the search bar.
Click on "Custom HTML" on the page.
Step 5: Paste the Embedded Chat Snippet
Paste the embedded chat snippet you copied from your Assistant into the HTML block on the page.
Step 6: Update or Publish
If editing an existing page, click the "Update" button to save your changes.
If creating a new page or post, click "Publish".
Step 7: Check Your Webpage
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.
Alternatively, you can open the whole page inside the Code editor and insert the chat snippet in the appropriate location, typically within the body of your page where you want the chat to appear:
Click on the Options menu at the top right corner of the Page editor.
Select "Code editor" mode inside the options menu.
You'll see the entire page as HTML and can add the code snippet where you want.
These steps will help ensure your chat feature is correctly added to your WordPress site.
📝 Iframe codes are not supported on sites without plugins. You can check the WordPress Help Center for more details here.
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 it has been 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. To resolve this, add NoForm to the exceptions list within your plugin's settings.
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 our live chat or email.
For WordPress and Elementor, please check this guide for more details on adding a chat code snippet to your site.
If you use WordPress and Divi, please check this guide about adding the chat code snippet to your WordPress and Divi.