After creating and setting up your Assistant, you can follow these steps to add an Embedded Chat to your WordPress and Elementor site:
How to Add Chat Bubble to WordPress on Elementor 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 the Elementor Settings
Go to the "Elementor" settings and click "Custom code".
Click "NEW CODE" button.
Specify the following:
1. Add title – It helps you identify this code snippet later.
2. Location – Determines the section of the webpage where the code will be located. Choose from the following options:
<head>- at the page level<body> – Start- at beginning of the page’s body<body> – End- at the end of the page’s body3. Priority – Choose from (1 – 10). If multiple scripts are assigned to the exact location, the priority levels determine the order in which they should run.
📝 We recommend choosing a <head> location so your chat will appear on all your web pages.
3. Priority – Define from 1 to 10 in which order the custom code will appear.
📝If multiple scripts are assigned to the exact location, the priority levels determine the order in which they should run.
Step 4: Add Chat Bubble Code Snippet to Your Website
Paste the chat code snippet to the code block editor.
📝 The built-in code linter checks your code and notifies you of any errors.
Step 5: Publish the Custom Chat Code
From the Publish block, for Conditions, click "Edit".
The PUBLISH SETTINGS window will appear. Set the desired conditions for your Entere site by clicking "ADD CONDITION" button.
Click "Save & Close" button to save the newly added condition.
📝 If you want this site part to appear on all pages, leave the default setting and click Save & Close in the lower right corner.
If you want to limit the template to certain pages, use the left dropdown to select whether to Include or Exclude pages.
Click Publish.
📝 You can also save the custom code as a draft or set a later publish date & time.
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 on Elementor 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".
Hover over the webpage where you want to add embedded chat code and click "Edit with Elementor".
Step 4: Add Custom HTML Block
Inside the Page editor, in the Widgets tab of the Elements, type "code" into the search bar.
Select "</> HTML" option.
Paste the embedded chat snippet you copied from your Assistant into the HTML block on the page.
Step 5: Publish the Custom Chat Code
Click "Publish" button to save the 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 defined in Step 4 or contact us for support.
These steps will help ensure your chat feature is correctly added to your WordPress and Elementor site.
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 get in touch with our Support team via our live chat or email.