Forum Documentation Showcase Pricing Learn more

Documental Docx, PDF, Image & CSV Converions - OCR, EXIF, Instant Maps all in one - Now with Save to your Apps Database!


Hey Athelene,

I have found Bubble to be very good tool and you can achieve quite a lot with it. The Bubble platform allows for other more experienced people to develop plugins to resolve issues that may not be a direct feature of the platform. If the non “Bubble developed” plugins are not currently working for you I would suggest that you hang in there. I have found that someone in the bubble world or maybe Bubble developers themselves come up with a solution at some point and in my instance the waiting for specific functionality has worked in my favor.



I am happy with the code, From what i have found the majority of the issues come from the SVG charts, more so when they are then drilled down into an Iframe or Plugin. I have a very large update coming for Documental with a huge new feature set & also im sorting out the parameter auth so you only need your key once or twice in the settings rather than what you see now. This being the case I will build this new fix into it then, but as I understand you have been very patient in waiting for the fix I will explain here how its used for when it is available for all however if you PM me the names of the apps you need the fix for I will make you have a private version to see you through. I will make sure this method continues on past the major update so you wont have to rebuild your workflows.

SVG Converter - more than just a fix.

+'Capture SVGs inc. Charts from within iFrames, Divs, amCharts Plugin & Standalone.'+

  • Use Do Every X Seconds to Keep it up to date with user changes.

  • Upload the .png output to Bubble & have a URL reflect your apps domain.

  • Use the Hide Function to auto hide to actual chart, Placing this plugin over the chart gives you the ability to have this render and auto hide the chart come time to use Documental /Print Pro where your having SVG Issues.

  • Couple this with About a GIF and create animated Chart GIF’s to send as a reporting option with a difference.

  • Scaled to work well with Retina devices.

                            'The Properties Setup:'

 'Feature Demo'


Does Documental send data to an external converter API or creates the document within just the Bubble plugin? I ask because I want to know if my customer’s data is being sent anywhere else. Many thanks!


Seems like you need a plugin called CSS Hunter to use SnapShot on an element??? I don’t see that the CSS Plugin exists?


I was wondering the same thing. I can’t seem to get the SnapShot to capture any of my elements. I followed the editor and all the screenshots trying different ways to get it to work. I can replicate everything but the element ID. I looked at the elements that were SnapShotted in the editor’s examples and none of them have that element ID. I even used those specific element ID’s. I do see that CSS Tools was used in some of the examples in the editor as well as CSS hunter. I noticed in the examples in the editor the workflows all started with CSS Hunter. When I look at the plugin it said it was private.

How do we call the element ID for the SnapShot?


Make sure you have turned on Element ID’s in Bubble Settings > General. It is a tick box near the fav icon setting. I don’t use CSS Hunter in my workflow for snapshot.



Is it the “Expose the option to add an ID attribute to HTML Elements”?


Yes it is.


I’m confused then as to where to find the Element ID that you would put in the SnapShot box. I had that checked off from previous research. Everything I want to snapshot is in an Element called Group A. This is what I have and it’s not even exporting it to the external site to download.


The element Id is at the very bottom of elements and allows you to provide a value. You put that same value in the snapshot.


That was exactly it!! Thank you so much. I didn’t scroll down far enough to investigate the element ID. For some reason, it didn’t capture the image in the group element but it did snag everything else. I cannot thank you enough for that. That was a facepalm moment there, lol.


Glad it worked out…onward.


@mebeingken, Thanks for helping out, Much appreciated! & @cschrade, No the CSS Hunter is not required. I have removed it from the dem to avoid confusion. (it was an old plugin for removing the bubble banner in demo’s).

@mattsmithhosting, Right Now: The magic happens within Google Cloud Services, The data is also stored here (Locked/Unlocked using your API Key.), The data is transacted through a secure connection using JWT Auth between Documental & Google’s Computational Engine - Then Documental -> Your App (Both Bubble Hosted).

Very Soon: All non temp & most (currently executing) data will be within your own app, there is a lot coming - this is going to become a primary continued focus as it grows.


Hi documental users :grinning:

I request assistance while holding a white flag.

I just purchased an annual license for documental, but I have no idea how this works.

I see in this thread that asking the following question may invite some criticism about my ability to decipher the examples provided, but here goes:

I want to convert a page in bubble from html to pdf to download. I see the examples, but (I suspect its the limitations of my business analyst background) without context it just doesn’t make any sense.

I don’t want to just cut and paste, I would prefer to know how it works.

Can anyone provide some steps for converting a repeating group or page from html into PDF to download. I should be able to work out how the others work from there.

Very much appreciated!



I have copied the example and I am getting this response?

Can anyone provide some insight?


I also have an annual license, and can get it to work either, even with the paid professional help of one of the most accomplished Bubblers, so I feel your pain.


Have you gotten anywhere with this?


Hey Steven…let’s see if I can help since I just did this…

Bubble page (or portion) to PDF for download:

–On the General Settings tab, make sure to “Expose the option to add id attribute to HTML elements” (checkbox)
–Put the Snapshot element on the page in question
–Add an ID attribute (name it whatever makes sense) to the element which contains the content you wish to convert to pdf (such as a group)
–Add a button to trigger the conversion to pdf with a workflow that has an Element Action Take a Snapshot. In the properties, put the ID Attribute you created above in step 3. You can manually set the width/height, or use something like CSS tools to set dynamically.
–On the same page under workflows, create a new Event >> Elements >> The Snap is ready to save. Make sure it is set to the element you added to the snapshot element you added to the page.
–Create an Action for that event using Plugins >> Document - Convert HTML. The html property should be set to Snapshot A’s (or whatever you renamed it to) Snapshot in Documental format. Then provide a name for the file and “pdf” for convert type.
–Create a second action Navigation >> open external website and provide The result of step 1’s response download link.

Basically what is going on is the snapshot grabs the html and sends it away for processing, and your page waits for the results to come back, where you then provide it to the user.

Happy to answer questions, especially given that I may have inadvertently missed something!



Thank you! Makes sense now I see it laid out logically.

This is the furthest I have gotten so far!

A couple of questions.

It appears the bubble progress bar runs at the top and gets stuck almost at the end as if some process is running and doesn’t stop? Have you seen this I also noticed this on the demo apps.

This occurs after the document has finished processing.

Also the result while taking the snapshot of a group is very bad quality, any ideas why this might occur?



Yes, I have the same progress bar experience…just never inquired about it.

It looks to me like you need to adjust your height and width settings. I haven’t gotten into the weeds on that part yet. I have just set the width manually since it won’t change for me, and the height is a calculation using CSS tools page height, and then I subtract some pixels to make it work. It’s just a hack that allowed me to move forward, but I’ll have to come back and revisit.