Docmosis Integration with Bubble
Create documents right from your bubble website or app using Docmosis Cloud.
We have developed an example app to showcase Docmosis integration with Bubble apps. Follow our instructions to replicate for yourself or jump straight into the application editor to see how our example app works.
You can find our live bubble app right here:
Jump into the application editor here:
This bubble app makes use of the free bubble API Connector plugin to connect to the Docmosis Cloud and even stores the returned file in the app database. Follow the steps below to start rendering documents straight from bubble.
Step 1: Start a Docmosis Trial
If you don't already have a Docmosis account, you can sign up for a free trial here. After you have signed up for Docmosis you can access the Docmosis Cloud Console from this link. The Docmosis Cloud Console is where you will store your document templates. For more info on building templates please see our resources page.
Step 2: Configure the Docmosis API in your Bubble App
a) Create a new Bubble App or start work with an existing one.
b) Install the free Bubble API Connector plugin by clicking on the Plugins tab in the left menu and searching for “api”:
c) Click Add another api to start adding the Docmosis api to you app:
d) Add an API Name and a Name for the api call:
e) Click expand and set the following fields:
f) Click initialize call, if everything is entered correctly you should get the following:
g) Now we can add the fields in the template as parameters. For each one, disable Private so that the parameter can be populated dynamically from an input field in your bubble app.
Step 3: Create a new Data Type to Store the generated File.
a) Click on the Data tab in the left menu. Under the Data Types tab, type a name for the new data type and click Create:
b) Now click on the Create a new field button and add a new field of type file:
Step 4: Create a form to match our template’s fields
An input field is needed for each tag <<…>> within your Docmosis template. In our example we have used a modified version of the Example Letter Template, and our form has been developed to match this template:
Defaults can also be added to your form to make data entry easier, like in our live app.
A button has been added at the end of our form to trigger the document generation workflow.
Step 5: Create a workflow to call the Docmosis API
a) Select the button you wish to use to trigger the document generation and click Start/Edit Workflow.
b) Step 1 of the workflow is to create the new Data Object (thing). Click on Click here to add an action… and select the Data (Things) tab and then click Create a new thing…
Under Type select the data type you created in step 3 (DocmosisFile). Click Set another field and select the file field of your thing (GeneratedFile) and set this to equal Get data from an external API:
Now select the API you created in step 2 (Docmosis - GeneratedLetter):
Now you can set the value of each parameter to equal the matching input field you created in step 4.
Note: For checkbox input types you will need to format the value as text:
Note: For date/time input you can change how you want the data to be displayed in the generated document:
c) Step 2 of the workflow is to download the file that was just generated. Click on Click here to add an action… and select the Navigation tab and then click Open an external website:
Click Insert Dynamic Data and click result of Step X (Create a new…) and then ‘s GeneratedFile:
Note that in our example app we have an additional step that deletes files more than 5 minutes old. This step is optional and is just used to keep our example app from filling up with files.
Step 6: That’s it!
Now you should be generating documents straight from your Bubble App!