Hi there,
We're currently working on a solution to capture data into SharePoint for a customer. One requirement is to capture signatures and I found a third-party provider "Cognito Forms" (www.cognitoforms.com) which supports this and also provides integration with Power Automate so we can easily process submissions.
I've managed to get everything working pretty well but I'm having a bit of trouble integrating the forms themselves into SharePoint. I've created a new SPFX project and have create a webpart but I'm having some trouble with the integration. Their are two methods for embedding are:
Seamless
<div id="form1"> <script src="https://www.cognitoforms.com/f/seamless.js" data-key="Muy2UY3MEke97JKU-QCXPA" data-form="38"> </script> </div>
IFrame
<iframe id="form1" src="https://www.cognitoforms.com/f/XahKK9dVBE6JTM2z_XX_RA/9" style="border:0;width:100%;" height="1035"></iframe> <script src="https://www.cognitoforms.com/f/iframe.js"></script>
Ideally I'd like to use seamless but since they are using these "data-key" and "data-form" attributes on the script block I'm not sure if that would be possible in terms of the spfx framework?
The iframe method almost works but I can't seem to import the "iframe.js" file into the project. I've followed the steps in the MS documentation (https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library) but I'm not sure how the iframe.d.ts module file should work and my attempts to create it haven't been successful. The usage is:
Cognito("#form1").prefill({"Name": {"First":"John","Last":"Smith"},"Phone":"8034567890","Email":"Email address removed"});
But I'm unsure how you declare the Cognito(element) function as a type and get it to return an interface with prefil. How do you declare a named function like this from an external source?
I appreciate this might be more of a typescript question but I went through their documentation on declaring modules and was none the wiser.
Any help would be much appreciated.
Olly
