Great that you’ve built your chat interface. Let’s look at it in action on your website.

First lets have a look at 3 types of chat interface outputs.

• Chat Widget on website

This is most commonly used chat interface where you can see a chat launcher as a bubble on left or right side of a website.

• Chat interface Embedded on webpage

The Embedded chat interface is NOT the widget you see in the right or left corner of the website. The embedded chat interface is implemented as an iframe within your webpage. It doesn’t have a widget launcher or pop-out. It feels part of your page. 

The Embedded chat interface has different use cases like replacing contact forms, making your website interactive, etc.

• Landing page

This is the dedicated webpage created for chat interface. You can share the landing page through social media channels or create a QR code/short-url

The landing-page has different use cases like ad campaigns, social media posts, business cards, email campaigns, sign up page, etc.

Navigate to specific tab on 👈 left side of this page to get the detailed installation steps for your website type.

Please reach out to  support@weconnect.chat for any queries.

Implement chat Widget on a Website using Javascript code

There are different ways to implement WeConnect.chat widget to your website. You can add the widget on your website directly, through the WeConnect.chat wordpress plugin or another External Provider (Google Tag Manager, Shopify, etc.)

Below steps are for installing chat widget directly on the website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available. 
5. Insert the copied code script snippet into your website page before closing</head> tag 
6. Publish your changes to see the chat widget on your website
7. Visit your website on the browser and you can see the chat widget is now visible on your website

All pages of the website: 

Implement the snippet in header before the closing </head> tag site wide.

Specific page of the website:

Implement the snippet in header before the closing </head> tag of a specific page.

Embed chat Widget on a webpage

First check the Embedded output in Builder-> Design->Embed to make sure it’s how you like it.

Important: The Embedded chat interface is NOT the widget you see in the right or left corner of the website. The embedded chat interface is implemented as an iframe within your webpage. It doesn’t have a widget launcher or pop-out. It feels part of your page. To implement the widget go to the tab: Widget Implementation Guide

The Embedded chat interface has different use cases like replacing contact forms, making your website interactive, etc.

You can embed a iframe anywhere on your website.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and scroll down to see steps to “Embed on a webpage”
5. Copy the iframe code given
6. Paste the iframe code anywhere in your webpage to show a chat interface

Tip: As per your need you can adjust the height and width of embed chat interface by adjusting the values suitable to your webpage.

Web resourses:
There are some amazing tutorials on how to embed iframes into your website

WordPress Elementor tutorial 

Shopify Iframe Tutorial
Squarespace Iframe Tutorial
Wix Iframe Tutorial 

Weebly iframe tutorial

Share chat interface as a Landing page

First check the Landing Page output in Builder-> Design->Landingpage / or preview the chat to make sure it’s how you like it.

The landing page has different use cases like ad campaigns, social media posts, business cards, email campaigns, sign up page, etc.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Share Landing Page” 
5. Copy the landing page URL to share publicly

Social media

Share the landing page through social media channels

Click on your favourite channel and share it there

QR Code or short url

Create a QR code of your landingpage or make it a short url you can track.

You can implement the QR code on print media (ad flyers, business cards, real estate pages, etc). You can use the short url in e-mail campaigns

Implement chat Widget on a WordPress Website using Plugin

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and scroll down to see steps to “Install widget on a WordPress website”

STEP 1: Download the WeConnect.chat wordpress Plugin: 

Go to the plugin directory in WP admin and search for Weconnect.chat or download the plugin here to install. https://wordpress.org/plugins/weconnect/

STEP 2: Activate Plugin:
Go to the plugin directory in WP admin and search for Weconnect.chat click “Activate”

STEP 3: Add the javascript snippet to WeConnect.chat plugin

1. Go to Plugins -> Installed Plugins
   2. Search for Weconnect.chat
2. Go to Settings
3. Copy the Code Snippet given below
4. Paste code into “Chatbot Snippet” in wordpress settings and apply the page settings.
5. Save settings
6. Hurray! Chat widget is visible on website

App Installation Steps

• How to install Desktop App on Microsoft  Windows OS
• How to install Desktop App on Apple Macintosh OS
• How to install Mobile App  

Install chat interface inside your Mobile App

You can install the chat interface anywhere using a unique link. Using webviews in mobile apps you can add your chat interface to your mobile app. 

1. Install a webview dependency in your mobile app project. 
2. Go to “Chat Interface” from left navigation bar
3. Open your “Chat Interface” to go inside the “Builder”
4. From Builder, go to the 4th step “Deploy”
5. Go to “Share Landing Page” 
6. Copy the landing page URL to install as a webview

• Web Views in IOS apps

• Web Views in Android

For example:

1. If you are using react native, use command “npm install react-native-webview.
2. Pass the URL of chat interface to show inside the mobile app
3. To show Landing page output use Landing page URL like this –> https://app.weconnect.chat/chat/landing?botId={Your bot id}
4. To show Widget output use Landing page URL like this –> https://app.weconnect.chat/chat/widget?botId={Your bot id}
5. Implement a CTA touchable button on mobile app UI which will open the webview on click.

Implement chat Widget on Wix Website 

Below steps are for installing chat widget directly on the Wix website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available. 

You have to be on Wix’s premium plan to add the chatbot’s snippet code. It has to be added under Settings > Advanced Settings > Tracking & Analytics. You can find the instructions from Wix for the same.

Implement chat Widget on Shopify Website 

Below steps are for installing chat widget directly on the Shopify website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available.

Shopify steps:

1. Login to Shopify admin
2. Edit code: Select your Online Store. Click on Themes. Select Edit Code from the Actions menu.
3. Insert code snippet:

   Go to Sections directory. Find the file header.liquid and paste the code snippet just before the closing of header tag. Since header.liquid is loaded on every page of your Shopify site, the chatbot will appear on every page. Click Save.

   You can paste the code snippet on any other liquid template. But do keep in mind that the chatbot will only appear if that particular liquid template is loaded.

4. Preview: Your website is now ready to show the chat widget

Note: If you can’t find a single header.liquid file, you should be able to see a theme.liquid file. Adding the code snippet to that will also work.

Implement chat Widget on Squarespace Website 

Below steps are for installing chat widget directly on the Squarespace website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available.

Squarespace steps:

1. Login to Squarespace
2. Select your site
3. Go to Settings
4. Select Advanced settings
5. Select code injection
6. Paste the code snippet copied from WeConnect.chat into Header section and click Save
7. Ready: Your website is now ready to show the chat widget

Implement chat Widget on Weebly Website 

Below steps are for installing chat widget directly on the Weebly website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available.

Weebly steps:

1. Login to Weebly
2. Click on edit for your website
3. Embed code: Insert the “embed code” into webpage
4. Edit HTML: Click on embed code container to open and click on “Edit custom HTML”
5. Code snippet: Paste the WeConnect.chat widget script code snippet, click outside edit box to save
6. Ready: Your website is now ready with chat widget

Implement chat Widget on Bigcommerce Website 

Below steps are for installing chat widget directly on the Bigcommerce website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available.

Bigcommerce steps:

1. Login to Bigcommerce
2. Select storefront
3. Go to Footer scripts
4. Inert the WeConnect.chat widget code snippet and click Save
5. Your website is now ready to show chat widget

Implement chat Widget on Tumblr Website 

Below steps are for installing chat widget directly on the Tumblr website.

First check the widget design in Builder-> Design -> Widget to make sure it’s how you like it and positioned in the right place.

1. Go to “Chat Interface” from left navigation bar
2. Open your “Chat Interface” to go inside the “Builder”
3. From Builder, go to the 4th step “Deploy”
4. Go to “Install Widget” and copy the code available.

Bigcommerce steps:

1. Login to Tumblr
2. Go to Tumblr dashboard
3. Click the Account Icon in the top Right. Then click Edit Appearance
4. Click on “Edit theme” to see the HTML code of your tumblr website
5. Access the HTML code in edit mode and paste the WeConnect.chat widget code snippet just before <head> tag.
6. Your Tumblr website is now ready with the chat widget

To show chat widget on mobile version of  your Tumblr site:

1. Go to Advanced Options under Edit Theme.
2. Disable Use default mobile theme and click Save.

Note: Remember to update the code snippet again as per above steps if you are making any changes to your Tumblr website theme.

Implement chat Widget on Website using GTM

Google Tag Manager (GTM)  helps to easily add / manage  HTML or Javascript snippets to your website. 

There are several advantages of using GTM to add the code snippet of your chatbot. You get a centralized management platform for all the snippets on your site. It’s easier to manage multiple chatbots using their interface and you can even specify where and how those chatbots should be launched.

GTM works through a system of Containers, Tags and Triggers.

Tag: A tag is the snippet code that you add to your site.

Container: A container basically contains all the tags you have added to your website. When a new container is created, you get a container code from GTM. This will be the only code snippet that you add to your website directly. Everything else happens within GTM.

Triggers: A trigger can be any action on your website. For example, someone clicks on an outbound link, downloads a file, visits a certain page, etc. Every tag should be associated with a trigger, otherwise, the tag will not function.

Steps for GTM:

1. Login to your GTM account, create new if you don’t have it on  tagmanager.google.com
2. Configure Container: Provide a name to your container. Preferably you can give your domain name. Choose “Web” and click on Create.
3. Next, you will have to accept the GTM terms and services and you will be shown your container code. It will have two parts and there will be specific instructions on where this has to be added. If you are using WordPress, then you can use a plugin to do this.
4. GTM container snippet: Here we are adding the container snippet to code a site that was made in native HTML.
5. Create new Tag: Under Tags, create New
6. Type of tag: For the purpose of adding the chat widget snippet code, we will use the Custom HTML option.
7. Chat widget snippet: Inside your custom html google tag, Paste the chat widget script snippet of your chat interface from WeConnect.chat from “Builder – Deploy – Install Widget – Copy script snippet”
8. Adding trigger: Trigger needs to be added to tag to determine when and where the chat widget will appear on your website . You will find the option to add the trigger at the bottom.
9.  There are many triggers available in GTM. Here we will use the All Pages trigger. This means that the current tag will be fired on all the pages of your site. You can create a new trigger using the “+” button in the corner.

   Once the trigger is added, give your tag a name and click on Save.

10. Publish: All the changes you have made inside your container will only become live once you publish it. For now, it’s only in draft-mode. Click on Submit to proceed.
11. Changes you make to your container are saved as versions. Give a name to your version and click on Publish.
12. Ready: Now your website is ready to show the chat widget

Note: Go to your website to see if the chatbot is working on all pages. Make sure that the GTM container code is added on all pages. The tags will work only on those pages where the container code has been added.

Extra Tips:

You can use GTM to customize how the bot appears on your site using triggers. Here are some examples.

• You can fire the chatbot based on how much the user has scrolled through the web page using the Scroll Trigger.

• You can fire the chatbot when a special link is clicked using the Click Trigger.

• Using the Page View trigger, you can fire different chatbots on different pages. Create tags for each chatbot and set the Page View trigger accordingly.

• You can choose to show the entire widget after a period of time using the Timer Trigger.

• If you want to fire the bot based on dynamic elements that appear on your web page, you can use the Element Visibility Trigger.