CODEWITHSUNDEEP
hellosign-api
nyphur
nyphur

Reputation: 2896

Opening an embedded HelloSign Signature in custom iframe

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):

enter image description here

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?

Upvotes: 0

Views: 543

Answers (1)

BarbaraW
BarbaraW

Reputation: 24

I'm an API Support engineer at Dropbox Sign,

We strongly recommend using our Embedded library to implement the iframe, as implementing that will ensure that you have implemented everything required to load Dropbox Sign.

Upvotes: -1

Related Questions