Installing AtomChat on Bubble

Before you begin

1. Signup for a free trial (if you haven't already)

First select a plan from the AtomChat Free Trial page, enter your email address and start your free trial.

2. Note your API keys

Sign in to your AtomChat Client Area and click on the Manage button and then note down the keys present in API Keys (top right button) section - API Key, Auth Key, License Key and App ID. You may need these during installation.

3. Secure your environment

For successful integration, please ensure your domain or local environment is SSL certified and secure.

AtomChat Admin Panel
AtomChat Admin Panel





Choose a layout

AtomChat offers 2 layouts

1. Docked Layout creates a floating chat widget at the bottom right/left corner of your website. 2. Embedded Layout embeds a chat interface inside any page of your website.

And please remember!!

AtomChat layouts are not designed to be used together on the same page. If you add both layouts on the same page, please expect erratic behaviour from the software.

Setting up Docked Layout

                   Docked Layout
Docked Layout



Please copy the code given below and replace APP_ID and AUTH_KEY with your unique keys.

Then follow the instructions given in the section - "Where to add this code?"

IMPORTANT NOTE Please make sure you have a paid plan for your Bubble Application (Personal, Professional or Production) and then only proceed with the following steps for integration

JS

ATTENTION

In the code snippet above, make sure to replace 'APP_ID' with your App ID and 'AUTH_KEY' with your Auth Key.

Where to add this code?

  • Login to your Bubble Dashboard and select the App you would like to add AtomChat to.
  • Then under the Settings section, select the SEO/Metatags tab.
  • Add the above code in the Script in the body text box.
Document image
  • Preview the changes.

IMPORTANT NOTE: Please make sure you have a paid plan for your Bubble Application (Personal, Professional or Production) and then only proceed with the following steps for integration.

Setting up Embedded Layout

               Embedded Layout
Embedded Layout



  • Login to your Bubble Dashboard and select the App you would like to add AtomChat to.
  • Then under the Settings section, select the General tab and enable the option “Expose the option to add an ID attribute to HTML elements“.
Document image
  • Now open the Design section and open the page where you wanted to add embedded layout.
  • Add the HTML element in the page from Visual elements list at left side (shown in following screenshot) and adjust the height and width.
Document image



  • Double click on the added HTML element, content box will get opened. Under Appearance, scroll down to the bottom and add ID Attribute for the element as “chatWindow“
Document image



  • Also under Appearance, please make sure that the option “Display as an iFrame“ is unchecked
Document image
  • Now add the following code in HTML editor block under Appearance -

Please copy the code given below and replace APP_ID and AUTH_KEY with your unique keys.

JS



  • Preview the changes.

ATTENTION

In the code snippet above, make sure to replace 'APP_ID' with your App ID and 'AUTH_KEY' with your Auth Key.

Contact Sync

Your users will be visible on the contact list once they log in using their credentials again to the site after installation.

Security

IMPORTANT

Before you go live, follow our security guide to ensure your integration is secure.

Jump to Security Guide

Congrats!! You are all set to start using AtomChat!