Pick the model that makes the most sense for your particular situation.

Click to Open

The easiest way to integrate the agent is to show a logo-button in the lower right hand corner of the page. When the customer clicks on the logo, it will open the agent and begin a conversation with your customer.

Here is the code for the button:

<script>
    (function (w,d,s,o,f,js,fjs){w['PGWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}
    (window,document,'script','pg','<https://app.productgenius.guru/static/pgwidget/pgwidget.js>'));
    pg('init',{genius_id:'embed-code',js_instance_id:'my-website-identifier'});
    
</script>

The string 'my-website-identifier' can be any string that makes sense for this site, such as the name of the website or the name of the page the script is running on. This string will appear as a label within all conversation records originating from this script.

NOTE: You must substitute the ‘embed-code’ with the correct code appropriate for your Genius. You can get the embed code to use for your Genius by clicking on your Genius on the application home page.

Click to Open Option 1: Adding a Link/Button

You can add one or more additional links or buttons anywhere on your webpage and use them to open a conversation with your agent. Simply add an 'onclick' handler to any HTML element, and clicking that element will open the agent. Here is an example:

<div onclick="pg('popup-open');" style="font-size:1.4em;border: 1px solid black;border-radius: 20px;cursor: pointer;">
    Click to Open Chat
</div>

Note the div has an 'onclick=...' handler. This is important, as the code is executed to open the widget when the div is clicked. This 'onclick' handler will only work on pages that have the script (above) previously installed.

Click to Open Option 2: Remove the standard logo

By default, the script will add a logo with a question mark on it to the lower-right-hand side of any page that has the script installed. Clicking on this question mark will launch the agent. If you don't want the standard question-mark logo added to the lower-right-hand corner of the page, you can easily disable it. Update your script by adding the green section shown below:

<script>
    (function (w,d,s,o,f,js,fjs){w['PGWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}
    (window,document,'script','pg','<https://app.productgenius.guru/static/pgwidget/pgwidget.js>'));
    pg('init',{show_icon: false,genius_id:'embed-code',js_instance_id:'my-website-identifier'});
</script>

Note the ’show_icon: false’ addition to the script. This setting will disable the default question-mark logo from showing. But any onclick= handlers you have defined will continue to function normally.

Open Chat Window

Rather than requiring a link to open the chat window, you can have the chat window automatically open whenever anyone goes to a specific page on your website. On the page you want the chatbot to appear, use this script instead of the previous script.

<div id="agent_div" style="width: 600px;height: 700px;"></div>
<script>
    (function (w,d,s,o,f,js,fjs){w['PGWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};
    js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}
    (window,document,'script','pg','<https://app.productgenius.guru/static/pgwidget/pgwidget.js>'));
    pg('init',{show_icon: false,genius_id:'embed-code',js_instance_id:'my-website-identifier'});    pg('showwin',{id:'agent_div'});
</script>

In this code, the div at the top of the code (with id=”agent_div”) will be filled in with the open chat window. It needs to be sized to the size you want the chat window to be on your page. You can hard code it (as shown here with the style attributes), or let it resize based on the page size.

Note that the id of the div must match the code in the last line of the script (in this example, the 'agent_div').

Mix-and-Match

You can mix-and-match these options as you need for your integration to work the way you want it to.