Embed ChatBot

Knacksters' Idea Lab
1

Does anyone know how to embed a CustomGPT chatbot into Knack?

Embed code from most sources is HTML but Knack only takes JS or CSS. What are my options here?

Here is the HTML embed code provided

<script defer src="https://cdn.customgpt.ai/js/chat.js"></script> <script defer> (function(){ function init(){ CustomGPT.init({ p_id:'#####', p_key:'################' }) } document.readyState === 'complete' ? init() : window.addEventListener('load', init); })(); </script>
1 Like
2

Can you provide the HTML as it’s missing from your post.

1 Like
3

My apologies, see above!

4

Hi @RyanL - I’m not a coder :technologist: but try adding this to your JavaScript section.

(function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.customgpt.ai/js/chat.js';
    script.defer = true;

    script.onload = function() {
        CustomGPT.init({
            p_id: '#####',  // Replace ##### with your project ID
            p_key: '################'  // Replace ################ with your project key
        });
    };

    document.head.appendChild(script);
})();

Don’t forget to replace your placeholders:

This code creates a new element dynamically and sets its src attribute to the CustomGPT library URL. It should initialise the CustomGPT chat using your provided Project ID and Project Key once the script has loaded. By doing this, you should be able to effectively embed the CustomGPT chatbot in your Knack application.

Give it a try :crossed_fingers:- Courtesy of ChatGPT :wink:

My YouTube Channel
Click here - over 100 Knack tutorials

2 Likes
5

@CarlHolmes Much Appreciated! I attempted with chatGPT and could not get it to load. The above worked perfect though. Thanks again!

6

Great, I’m glad it worked. I’d be interested to see how it functions. If you’d like to connect sometime perhaps you could show me.

Could you mark as the “solution” please. :pray:

7

@CarlHolmes @RyanL, I don’t have an alternate solution, but be mindful that anyone can access your chatbot’s project ID/API key if you specify it in the Knack JavaScript editor.

3 Likes
8

Agreed @StephenChapman I’d love to see a solution on that to keep the project keys safe.

Thanks for posting @CarlHolmes !

1 Like
9

@BradStevens would storing the API key in a Zapier, Make, or Power Automate flow, and making a webhook to return the key suffice? Ideally it should only occur on page load if it’s a chatbot widget, so as not to consume too many third-party API calls/operations.

10

@StephenChapman I think that’d help obfuscate it but not prevent someone from setting a breakpoint in the browser and then read the variable unfortunately. Happy to be proven wrong on this!

1 Like