I've built out a system where my users can sign HelloSign signatures created with embedded signature request on the backend.
In the frontend, I'm using the hellosign-embedded library and using it like this to open the included iframe:
const helloSignClient = new HelloSign({ clientId: process.env.REACT_APP_HELLO_SIGN_CLIENT_ID });
// ....
const [generateEmbeddedSignUrl] = useMutation<
IGenerateEmbeddedSignUrlResponse,
IGenerateEmbeddedSignUrlVars
>(GenerateEmbeddedSignUrl, {
onCompleted: ({ generateEmbeddedSignUrl }) => {
if (generateEmbeddedSignUrl.error) {
return message.error(
`Error generating signature URL: ${
generateEmbeddedSignUrl.error.userMessage || generateEmbeddedSignUrl.error.description
}`
);
}
if (generateEmbeddedSignUrl.embeddedSignUrl.signUrl) {
// Embedded URL is generated. Start Signing with the Hello Sign SDK
helloSignClient.open(generateEmbeddedSignUrl.embeddedSignUrl.signUrl, {
// testMode will be true on staging or development, false on production
testMode: process.env.NODE_ENV === 'production' ? false : true,
});
}
},
onError: (error) => message.error(error),
});
Now that I have new requirements, I want to place this hellosign signature into a modal, where the modal will have the list next to the iframe (removed some info because sensitive info):
I'm trying to do something like this but it seems that there's some conflicting logic where the hellosign library will create its own modal/iframe and controlled like that. I'm not sure how to override this behavior.
I tried taking my generated sign URL and placing that into its own iframe but I get an error:
Something went wrong!
Your request seems to have been malformed and returned the following error:
→ Missing parameter: client_id
Which I assume is me missing client_id from the library:
const helloSignClient = new HelloSign({ clientId: process.env.REACT_APP_HELLO_SIGN_CLIENT_ID });
I guess my questions are: how do I achieve the mockup that I was given? Is it possible to open an embedded signature link in my own custom modal/iframe? Do I have to take the CSS route and override some behaviors? How do I open an embedded link without needing a client_id or using this library?
