EnglishHelp Center
Implement chat interface on your website
Great that you’ve built your chat interface. Let’s look at it in action on your website.
For a refresher, at WeConnect.chat you can have a 3 types of chat interface supported.
- Chat Widget on website
- Chat interface Embedded on webpage
- Landing page
Implement chat Widget on a Website using Javascript code
- Go to “Chat Interface” from left navigation bar
- Open your “Chat Interface” to go inside the “Builder”
- From Builder, go to the 4th step “Deploy”
- Go to “Install Widget” and copy the code available.
- Insert the copied code script into your website page before closing</head> tag
- Publish your changes to see the chat widget on your website
- Visit your website on the browser and you can see the chat widget is now visible on your website
Implement chat Widget on a WordPress Website using Plugin
- Go to “Chat Interface” from left navigation bar
- Open your “Chat Interface” to go inside the “Builder”
- From Builder, go to the 4th step “Deploy”
- Go to “Install Widget” and scroll down to see steps to “Install widget on a WordPress website”
Embed chat Widget on a webpage
- Go to “Chat Interface” from left navigation bar
- Open your “Chat Interface” to go inside the “Builder”
- From Builder, go to the 4th step “Deploy”
- Go to “Install Widget” and scroll down to see steps to “Embed on a webpage”
- Copy the iframe code given
- 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.
Share chat interface as a Landing page
- Go to “Chat Interface” from left navigation bar
- Open your “Chat Interface” to go inside the “Builder”
- From Builder, go to the 4th step “Deploy”
- Go to “Share Landing Page”
- Copy the landing page URL to share publicly
- Social share : Use options given to share landing page on a Facebook, WhatsApp or Twitter.
Install chat interface on 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.
- Install a webview dependency in your mobile app project.
- Go to “Chat Interface” from left navigation bar
- Open your “Chat Interface” to go inside the “Builder”
- From Builder, go to the 4th step “Deploy”
- Go to “Share Landing Page”
- Copy the landing page URL to install as a webview
For example:
- If you are using react native, use command “npm install react-native-webview.
- Pass the URL of chat interface to show inside the mobile app
- To show Landing page output use Landing page URL like this –> https://app.weconnect.chat/chat/landing?botId={Your bot id}
- To show Widget output use Landing page URL like this –> https://app.weconnect.chat/chat/widget?botId={Your bot id}
- Implement a CTA touchable button on mobile app UI which will open the webview on click.
