Manage your videos with Vimeo Connector (access token) Plugin!

Hello bubblers! We are thrilled to introduce our new plugin - Vimeo Connector (access token) Plugin developed by NoCode Lab.

1. What's Vimeo?

vimeo.com

Vimeo is an online video streaming site that allows users to upload and promote their videos with a high degree of customization.

When you open your Vimeo account, you can upload files up to 12 hours long for free. Vimeo has set time limits based on your membership level, meaning free users are limited when it comes to how much they can upload and what features they can access. With a basic free membership, you can upload 500MB per week with up to 5GB of total storage.

In terms of monetizing via a video platform, both platforms allow their users to make money online from their videos but on YouTube, the main way to earn money is via YouTube ads whereas Vimeo offers “Vimeo on Demand” where you can sell videos directly to viewers. So if you are thinking of selling your own videos or sharing videos only with your paid members, Vimeo is the better option than YouTube.

Coaching No Code Apps has already launched a bubble plugin for uploading videos on Vimeo. The difference between their plugin and ours is "with/without authentication". Our plugin "Vimeo Connector (access token)" doesn't require any authentication, you will be developing your bubble apps easier and faster. Our plugin uses "Personal Access Token" in order not to require authentication.

vimeo.zendesk.com

2. What's Vimeo Connector (access token) Plugin?

This plugin, enables you to upload and search videos, to create albums of your own videos, and to add comments on Vimeo page. This plugin uses Vimeo API with a Vimeo access token.

Vimeo Connector (access token) Plugin | Bubble

Let's get started!

3. Preparation

3.1. Vimeo Settings

3.1.1. Create a Vimeo account and create a new app on Vimeo Developer.

Enter the developers portal with the following link. Click "Join" button to create your Vimeo account.

developer.vimeo.com

After signing-up and logging in, click the button of "New app" in the upper right of the page and start to create a new app.

Then you’ll see a form that you have to fill in to create your app. Once filled it out, click the button of "Create App".

Note - You may not be able to include the word "Vimeo" for the App name.

3.1.2. Send a Request to Vimeo to Upload your videos

You are automatically going to My Apps Page after creating a new app. Click "request additional access" in "Upload Access" under "Permissions"

Input information then click the button of "Request Upload Access". Please be aware that it may take 3 or 4 days or more to get permission.

While your request is being reviewed, you'll see "Your upload request is being reviewed" in Upload Access on your page.

You will receive an email with the subject : "Vimeo upload access approved!" from Vimeo after a few days.

3.1.3. Generate a "Personal Access Token" on Vimeo developer console.

After you’ve received access approval mail, you have to add some information to app at Vimeo Developer page, so as to generate your access token.

You are going to login to Vimeo Developer again and set as follows in the setting page for apps at https://developer.vimeo.com/apps

• Select "Authenticated (you)" for Authentication
• Select "Private" for [Scopes] and select the required scopes such as Create, Edit and Upload as needed.
• Once all set, press [Generate] button.

After adding all the necessary information you’ll be able to generate your access tokens for making calls to the API Vimeo. Copy and store your Personal Access Token (--★)

Notice!

• Without proper scope settings when generating Access Token, this plugin won't work properly. For example, if you don't select "Upload", you can't use Upload API.

• To upload videos with Vimeo API, you definitely need to send a request for the approval. Before approved, you won't be able to see and select "Upload" scope when generating Access Token.

3.2. Bubble Settings

3.2.1. Install the plugin!

Click "+ Add plugins" on the Plugins tab and search for our plugin: "Vimeo Connector (access token) By Nocode Lab".

3.2.2. Input Your Personal Access Token

Input "Bearer [Personal Access Token ((--★) above)]" in "API Key" box in the Plugins page. Make sure to space out between "Bearer" and your Access Token.

For example, if the your Personal Access Token is "dcbaaa112233445566", the value you are going to input will be "Bearer dcbaaa112233445566".

4. How to upload videos on Vimeo with Vimeo Connector (access token) plugin?

Let's create an app that uploads videos from a bubble app to the Vimeo website.

4.1. Data Type Settings

Go to the Data tab, let's create a Data Type: "Vimeo-Video" and a field "Video" where you can upload videos. Make the field type "Upload".

4.2. Design Page

Configure File Uploader element, Input element (to input video's title), Multiline Input element (to input video's description), and Button element (to execute uploading).

4.3. Workflow Settings

Let's begin with new event : "Button Upload is clicked" and complete your Actions as follows.

Choose "Create a new thing...", set the Type as "Vimeo_Video" and input "File Uploader's value" into "Video".

Then, reset relevant inputs and display registered data in Group element.

In the next step, add the action : "Upload Video from Link" (in a category : "Plugins").

You can set each properties as follows.

• (body) url : https:Result of step 1 (Create a new Vime...)'s Video's URL)
• (body) size : FileUploader's file size
• (body) name : Input Video_Title's Value
• (body) description : Multiline Input Video's_Description's value

Let's check in a preview how your app will go through!

4.4. Check it up in Preview

Let's upload a video on a preview of bubble app.

I've uploaded a video "IMG_7725" with a file uploader and named both the video title and video description "Test".

A few minutes later after you pressed "Upload" button, you will receive a mail from Vimeo with a subject "Your video is now on Vimeo". Let's click a blue button "Go to video".

In your Vimeo account portal, you will see a video you uploaded on bubble app.

5. How to search videos on Vimeo with Vimeo Connector (access token) plugin?

5.1. Design Page

Configure Input element (search box), Button element (to execute searches) and Repeating Group element (to display search results).

In Repeating Group, select "Search Vimeo data (Vimeo)" on Type of content. No need to fill out at the Data source.

Configure Text element and Image element in the Repeating Group.

Write "Current cell's Search Vimeo data (Vimeo)'s name" with Insert dynamic data in Text element property.

And write "Current cell's Search Vimeo data (Vimeo)'s pictures sizes:first item's link" with Insert dynamic data at Dynamic image in Image element propert.

5.2. Workflow Settings

Create one action under the event "Button Search is clicked".

Go to "Click here to add an action" and select Display list in a category "Element Actions".

You can set each properties as follows.

• Element > Repeating Group Search
• Data source > Get data from an external API > API provider > "Search For Videos"
• (param.)query > Input Search's value with Insert dynamic data
• Add " 's data" after "Vimeo - Search Vimeo"

5.3. Check it up in Preview

Let's check in a preview how your app will go through!

Input "bubble" in the search box. Results of videos with a word of "bubble" will be displayed.

6. Question?

This plugin also enables you to create albums of videos (and edit and delete), like videos (and unlike), subscribe or unsubscribe channels and etc.

Very proudly, our plugin is free for use!

If you have any questions about the matter regarding this plugin, please feel free to contact us at nocodelab@gmail.com

Happy building!

7.Plug-in updated (added on 2022/10/24)

Vimeo plugin, upgraded!

New functions added as follows :

API Name	Specification
Upload Video Private Link	Upload the video with the privacy setting of "Unlisted"
Upload Video from Link to folder	Specify the folder and upload
Get Embed response	Get HTML for embedding. HTML for embedding which is obtained from the normal upload response is not responsive. Use this function to get the responsive HTML code for embedding.
Upload a disabled Video on Vimeo	Upload the video with the privacy setting "Hide from Vimeo". The condition to embed the video can be set. *If you set "Specific domains" as the condition, domains are need to be specified separately.
Add Whitelist	If you set "Specific domains" as the embedding condition, specify the target domains here.

Previously, only normal uploads were available, but now you can set the privacy settings and specify folders for uploading!

Bubble also providing an element to play the Vimeo video, but it does not support the videos in the folder. In that case, you can use "Get Embed response" to get the embedded HTML and play it by using the HTML element.

7.1. Notes.

Paid Vimeo plan is required to set the Privacy settings, except for "Public" and "Private".
In the past, some free options were available other than "public" and "private," but those are currently unavailable.
Please note that a paid plan is also required if you choose "specific domain" as the embedding condition.