search

chatdoc-com / ChatDOC-API-Demo

36 stars 11 forks source link

Remove branding from documentviewer and be able to drawsources #15

Open imeavinash opened 3 weeks ago

imeavinash commented 3 weeks ago

Hi,

I am working on a Bubble.io app for my client where i have integrated the chatdoc API and documentviewer. Bubble.io is a no code tool. I had some issues in integrating the SDK. Somehow I was able to integrate it and use it to initialize the SDK using only the el: DOM element parameter. I would like to be able to initialize the SDK using the upload_id and JWT token too. Also, can we remove the branding "Powered by Chatdoc API from the document viewer"? Also, after initialising the SDK, I am unable to draw sources. I have integrated the SDK by first preparing a bundle using webpack in a node project where i installed chatdoc SDK. Then i am using that bundle.js file as a source in my front end js script.

Any help in these will be highly appreciated. Thanks.

Ronalci commented 2 weeks ago

Hello! I apologize for the delay! Thank you very much for your support for us!

Currently, our SDK does not support initialization using the upload_id and JWT token, so the DOM element parameter 'el' must be used to initialize the SDK. However, your suggestion is very good, and we will try to promote the optimization of this feature.

At present, it is also not supported to remove the ChatDOC brand logo, but we are working hard to develop this feature, and we expect to provide this option within the next few weeks. Once the feature is implemented, we will notify you at the first time, and also please continue to pay attention to our updates.

In addition, in order to better help you solve the problems encountered when using the ChatDOC SDK, could you please describe your specific usage method and parameter settings in detail?

I hope our reply is helpful to you. Have a nice day!

imeavinash commented 2 weeks ago

Hi,

Thanks for your reply. I will wait for the feature to remove chatdoc branding.

Please look at the following code. I am using it to display the pdf on the frontend in an HTML element in Bubble.io. When try to draw sources, I am calling the drawsourcebox function but it throws error saying can't find function sdk.drawsources.

https://c90f8055fa6c93515b054c0333df9374.cdn.bubble.io/f1718226173604x938927707629781200/main9.js

This is a link to bundle file. I made this file by creating a node project in replit -> installing chtadoc sdk -> making bundle using webpack.

Link to the repl - https://replit.com/@imeavinash/chatdocbundling2?v=1

<!DOCTYPE html>

PDF Viewer

======================================

This is the javascript i am running when i am trying to draw the sourcebox -

const pageNum = properties.param1; // Replace with dynamic data from Bubble.io const left = properties.param2; // Replace with dynamic data from Bubble.io const top = properties.param3; // Replace with dynamic data from Bubble.io const right = properties.param4; // Replace with dynamic data from Bubble.io const bottom = properties.param5; // Replace with dynamic data from Bubble.io

// Function to send a message to the iframe function sendMessageToIframe(action, data) { const iframe = document.getElementById('pdf-container2'); if (!iframe) { console.error('Iframe not found'); return; }

const message = { action, ...data };

function postMessageToIframe() { if (iframe.contentWindow) { iframe.contentWindow.postMessage(message, 'https://ethixia.com'); } else { console.error('Iframe contentWindow is not accessible'); } }

postMessageToIframe();

// Wait for the iframe to load completely // if (iframe.contentWindow) { // If iframe is already loaded //postMessageToIframe(); // } else { // Attach onload event to iframe //iframe.onload = postMessageToIframe; //} }

// Example usage function openPdfInIframe(fileurl) { sendMessageToIframe('openpdf', { url: fileurl }); }

function drawSourceBoxInIframe(pagenum, left, top, right, bottom) { sendMessageToIframe('drawsourcebox', { pagenum, left, top, right, bottom }); }

//drawSourceBoxInIframe(1, 100, 100, 200, 200); window.frames[0].frameElement.contentWindow.drawSourceBoxInIframe(pageNum, left, top, right, bottom);

==================================

This is the error i am getting. I am showing the above html to show the pdfviewer in an iframe html element. And I am trying to update sources.

Look at the last line of the error -main9.js:1 Uncaught (in promise) Error: Method drawSources not found. at Proxy. (main9.js:1:27534)

main9.js is the bundle file as described earlier.

Uncaught SecurityError: Failed to read a named property 'frameElement' from 'Window': Blocked a frame with origin "https://ethixia.com" from accessing a cross-origin frame. listener @ run_debug.js:728Understand this error VM1880:52 Uncaught DOMException: Failed to read a named property 'frameElement' from 'Window': Blocked a frame with origin "https://ethixia.com" from accessing a cross-origin frame. at eval (eval at (PLUGIN_1488796042609x768734193128308700/Toolbox-action--Run-javascript-.js), :52:18) at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-action--Run-javascript-.js:3:390) eval @ VM1880:52 eval @ Toolbox-action--Run-javascript-.js:3 setTimeout (async) eval @ Toolbox-action--Run-javascript-.js:3 (anonymous) @ run_debug.js:588 (anonymous) @ run_debug.js:715 run_with_error @ run_debug.js:693 (anonymous) @ run_debug.js:715 run_without_catching_not_ready2 @ run_debug.js:51 (anonymous) @ run_debug.js:715 error @ run_debug.js:115 _try_catch_finally @ run_debug.js:115 do_evaluate @ run_debug.js:115 WatcherClass @ run_debug.js:115 Watcher2 @ run_debug.js:115 run_once2 @ run_debug.js:115 action_def.run @ run_debug.js:715 (anonymous) @ run_debug.js:404 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 callback @ run_debug.js:51 run @ run_debug.js:404 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 run_subsequent_actions @ run_debug.js:717 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 callback @ run_debug.js:51 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:404 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 callback @ run_debug.js:51 run @ run_debug.js:404 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 run_subsequent_actions @ run_debug.js:717 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 _run_workflow @ run_debug.js:717 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 (anonymous) @ run_debug.js:717 (anonymous) @ run_debug.js:117 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 callback @ run_debug.js:51 freeze_workflows @ run_debug.js:117 run_workflows @ run_debug.js:717 (anonymous) @ run_debug.js:504 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 _attach_success @ run_debug.js:51 then @ run_debug.js:51 callback @ run_debug.js:51 run_once2 @ run_debug.js:115 (anonymous) @ run_debug.js:504 (anonymous) @ run_debug.js:117 (anonymous) @ run_debug.js:51 (anonymous) @ run_debug.js:51 resolve @ run_debug.js:51 (anonymous) @ run_debug.js:115 new_handler @ run_debug.js:115 do_evaluate @ run_debug.js:115 run_me @ run_debug.js:115 _run_scheduled @ run_debug.js:115 (anonymous) @ run_debug.js:115 traceSpan2 @ run_debug.js:115 run_scheduled2 @ run_debug.js:115 setTimeout (async) ensure_scheduled @ run_debug.js:115 (anonymous) @ run_debug.js:115 invalidate @ run_debug.js:115 invalidate @ run_debug.js:51 _was_updated @ run_debug.js:51 turn_on @ run_debug.js:51 (anonymous) @ run_debug.js:115 setTimeout (async) _run_scheduled @ run_debug.js:115 (anonymous) @ run_debug.js:115 traceSpan2 @ run_debug.js:115 run_scheduled2 @ run_debug.js:115 requestAnimationFrame (async) ensure_scheduled @ run_debug.js:115 (anonymous) @ run_debug.js:115 invalidate @ run_debug.js:115 invalidate @ run_debug.js:51 invalidate @ run_debug.js:475 write_child @ run_debug.js:475 set @ run_debug.js:475 element_clicked @ run_debug.js:731 (anonymous) @ run_debug.js:122 dispatch @ pre_run_jquery.js:2 y.handle @ pre_run_jquery.js:2Understand this error about:blank:24 SDK initialized: Kr {} about:blank:67 Global functions defined and message listener added main9.js:1 Uncaught (in promise) Error: Method drawSources not found. at Proxy. (main9.js:1:27534)

Ronalci commented 2 days ago

It seems that the drawSources method is being called before the PDF viewer has finished loading. You can call it within the EVENT_TYPES.VIEWER_CREATED event like this example:

sdk.on(EVENT_TYPES.VIEWER_CREATED, () => { sdk.drawSources(sources); });