Install PLuG search on your website
There are two primary methods to customize PLuG chat. The easiest way is to do so through the app by navigating to Settings > Support > PLuG Settings > Configuration, Styling and Layout Tabs. For detailed descriptions of the parameters, refer to the Customize documentation.
Alternatively, for the most comprehensive customizations, refer to our SDK functions here.
Integration code
To get the PLuG search widget to appear on your website and web app, copy and paste the snippet below on every page where you want the widget to appear for website visitors.
Unique app ID
Make sure to replace the app ID with your app ID which identifies your PLuG search widget. You can access your app ID from your DevRev account by following these steps.
- In DevRev, go to Settings > Support > PLuG Settings through the settings icon in the top-left corner.
- Click Enable PLuG Widget if it isn't already enabled.
- Copy your Unique App ID from the Configuration tab.
Setup for HTML
Place this code in the head of your HTML page.
1 <script2 src="https://plug-platform.devrev.ai/static/plug.js" 3 type="text/javascript">4 </script>
Place this code in the body of your HTML page.
1 <script>2 window.plugSDK.init({3 app_id: '<your_unique_app_id>',4 disable_plug_chat_window: true,5 });6 7 window.plugSDK.onEvent((payload) => {8 if (payload.type === 'ON_PLUG_WIDGET_READY') {9 window.plugSDK.initSearchAgent();10 }11 });12 </script>
Setup for React
Place this code inside the react component where you want to render the chat widget. Typically you should do it as top level component like App.js.
1 useEffect(() => {2 window.plugSDK.init({3 app_id: '<your_unique_app_id>',4 disable_plug_chat_window: true,5 });6 7 window.plugSDK.onEvent((payload) => {8 if (payload.type === 'ON_PLUG_WIDGET_READY') {9 window.plugSDK.initSearchAgent();10 }11 });12 }, []);
-
To toggle searchAgent, call the following method on any event required:
1 window.plugSDK.toggleSearchAgent(); -
To prefill search input from outside the window, call the following method:
1 window.plugSDK.prefillSearchQuery(query:"string")
You should now have PLuG search widget installed on your website. Facing some issues? Reach out to us through our own PLuG chat widget from the bottom right of your screen.
Once the widget is installed on your website, every user who visits your website is considered an anonymous user. Anonymous users are the users that come to your site and haven't yet logged in or shared any information.
We understand the importance of making your engagement more personalized and contextual with your customers. Learn how to identify your customers and update their information.