✅
Link to plugin page: https://zeroqode.com/plugin/vimeo-plugin-for-bubble-1687517015401x449665290618651600
Demo to preview the settings
Introduction
With this plugin, you can authorize users' Vimeo accounts to upload videos, retrieve their own videos and albums, manage their showcases, manage channel subscriptions, like videos, and comment on videos. You can also directly search for Vimeo videos.
Prerequisites
- You must have the Vimeo Developer account.
How to set up
Register a developer account
Follow this link to create an account to access the developer dashboard.
Create a new app
Depending on your use-case, create a new app and select the appropriate options.
Gather your Client Identifier and Client Secret
You'll need these two values for the plugin to function properly. The API ID/API key (also known as Client identifier in your Vimeo dashboard) can be found here under the greyed-out input:
After you've copied this value, paste this into the App ID/API key input in your plugin settings. For testing purposes, it is recommended you use the dev inputs at the bottom, then swap out your live API keys to the non-dev inputs when you're ready to go live with your app.
After you've successfully inserted your App ID/API Key, you'll need to find your App Secret next. This can be found on the same page in your Vimeo developer dashboard after you scroll down some (this is labeled as Client secret) under the greyed-out input:
Same as the previous step regarding your App ID/API Key, paste the value in either the dev input or non-dev input depending on your scenario:
Specify the callback URL
After you determine which page in your application the signup and/or login process with Vimeo will take place, grab the URL (note that you'll need to update this URL should you update your domain at any point) and add it to Vimeo by navigating here:
That's it! You now have everything set up and are ready to connect a User to their Vimeo account. Give your users an element to interact with that initiates the authentication process. You can find this under the Account tab > Signup/login with a social network
Select Vimeo from the dropdown. If you see a button that prompts you to add your API Key, double-check and make sure you've included this in the plugin settings.
That's it! Run a test with this button to confirm everything is set up correctly. You will see the OAuth consent screen and should be directed back to the page you indicated as your callback URL upon completion.
List User's Videos - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/videos#get_videos
Set up the datasource
We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (List User's Videos data (Vimeo)):
Set up the API call
Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
You'll have to option to change the number of results returned from the API call after selecting the correct API provider. Leave this as the default value of 100 if you don't wish to change it.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use. We've added 3 text elements to the repeating group cell to display the video's name, duration, and link as examples.
Available Parameter (* indicates a required value)
per_page - How many results (videos) to return from the API call per page.
Get Single Video - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/videos#get_video
Set up the datasource
We're using a group in our example. Make sure whatever element you use has the correct type of content set (Get Single Video (Vimeo)):
Set up the API call
We'll use a "Display Data in Group" action to send the results of this API call to the group we've set up.
Insert the ID of the video you're looking up into the (path) video_id input:
That's it! You'll now be able to display any information from the Video in the group you've indicated as your data source.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Available Path (* indicates a required value)
video_id* - The ID of the video you're looking up.
Get User Info - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/users#get_user
Set up the datasource
We're using a group in our example. Make sure whatever element you use has the correct type of content set (Get User Info (Vimeo)):
Set up the API call
We'll use a "Display Data in Group" action to send the results of this API call to the group we've set up.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Available Path (* indicates a required value)
video_id* - The ID of the video you're looking up.
List User's Showcases (Formerly Albums) - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/showcases#get_showcases
Set up the datasource
We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (List All Albums data (Vimeo)):
Set up the API call
Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
Make sure you select "data" from the list of options in the next window:
That's it! The repeating group is now set up to accept the data returned from this API call.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Search Vimeo - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/videos#search_videos
Set up the datasource
We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (Search Vimeo data (Vimeo)):
Set up the API call
Using the blue button from the screenshot above, we'll use a Display Data in List action to send the results of this API call to the repeating group we've set up.
You can now replace the static value in (param.) query with an input's value or any other text-based data source you want to use with this API call.
Make sure you select "data" from the list of options in the next window:
That's it! The repeating group is now set up to accept the data returned from this API call.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Available Parameter (* indicates a required value)
query* - The search phrase.
Create Showcase (Formerly Album) - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/showcases#create_showcase
Set up the API call
In this example, we'll be making a quick API call to Create a Showcase. Like our other demos, we'll use a blue "Create" button to do this.
Start by creating a form to collect the necessary parameters.
Add a workflow action to the blue Create button pictured above, and select Vimeo - Create Showcase (Formerly Album) from the list of plugin actions:
Now map the inputs to their corresponding parameters. More information on which parameters are required is covered at the end of this article.
That's it!
Available Parameters (* indicates a required value)
name* - The name of your showcase.
description* - The description of your showcase.
password - The password to access your showcase (optional). If you indicate the privacy of this Showcase to be private, a password must be included.
privacy* - The privacy setting for your showcase. Values you can include are: anybody, embed_only, nobody, password, team.
Edit Showcase (Formerly Album) - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/showcases#edit_showcase
Set up the API call
In this example, we'll be making a quick API call to Edit a Showcase. Like our other demos, we'll use a blue "Edit" button to do this.
Start by creating a form to collect the necessary parameters.
Add a workflow action to the blue Edit button pictured above, and select Vimeo - Edit Showcase (Formerly Album) from the list of plugin actions:
Now map the inputs to their corresponding parameters. More information on which parameters are required is covered at the end of this article.
That's it!
Available Parameters (* indicates a required value)
name* - The name of your showcase.
description* - The description of your showcase.
password - The password to access your showcase (optional). If you indicate the privacy of this Showcase to be private, a password must be included.
privacy* - The privacy setting for your showcase. Values you can include are: anybody, embed_only, nobody, password, team.
Delete Showcase (Formerly Album) - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/showcases#delete_showcase
Set up the API call
In this example, we'll be making a quick API call to Delete a Showcase. Like our other demos, we'll use a blue "Delete" button to do this.
Start by creating a form to collect the necessary path.
Add a workflow action to the blue Delete button pictured above, and select Vimeo - Delete Showcase (Formerly Album) from the list of plugin actions:
Now map the input to its corresponding path.
That's it!
Available Path (* indicates a required value)
album_id* - The id of your showcase you want to delete.
Get Videos in a Showcase (Formerly Album) - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/showcases#get_showcase_videos
Set up the datasource
We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (Get Videos in an Album data (Vimeo)):
Set up the API call
Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
Make sure you select "data" from the list of options in the next window and replace the album_id value with your own value:
That's it! The repeating group is now set up to accept the data returned from this API call.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Available Path (* indicates a required value)
album_id* - The id of your showcase you want to delete.
Available Parameter (* indicates a required value)
per_page - How many results (videos) to return from the API call per page.
Get Subscribed Channels - Data Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/channels#get_channel_subscriptions
Set up the datasource
We're using a repeating group in our example. Make sure whatever element you use has the correct type of content set (Get Subscribed Channels data (Vimeo)):
Set up the API call
Using the blue button from the screenshot above, we'll use a Display List action to send the results of this API call to the repeating group we've set up.
Make sure you select "data" from the list of options in the next window:
That's it! The repeating group is now set up to accept the data returned from this API call.
Refer to the documentation link at the top of this page to view a list of all attributes that are available for use.
Subscribe to a Channel - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/channels#subscribe_to_channel
Set up the API call
In this example, we'll be making a quick API call to Subscribe to a Channel.
Start by creating a form to collect the necessary path.
Add a workflow action to the blue Subscribe button pictured above, and select Vimeo - Subscribe to a Channel from the list of plugin actions:
Now map the input to its corresponding path.
That's it!
Available Path (* indicates a required value)
channel_id* - The id of your channel you want to subscribe to.
Unsubscribe from a Channel - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/channels#unsubscribe_from_channel
Set up the API call
In this example, we'll be making a quick API call to Unsubscribe from a Channel.
Start by creating a form to collect the necessary path.
Add a workflow action to the blue Unsubscribe button pictured above, and select Vimeo - Unsubscribe to a Channel from the list of plugin actions:
Now map the input to its corresponding path.
That's it!
Available Path (* indicates a required value)
channel_id* - The id of your channel you want to unsubscribe from.
Like a Video - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/likes#like_video
Set up the API call
In this example, we'll be making a quick API call to Like a Video.
Start by creating a form to collect the necessary path.
Add a workflow action to the blue Like button pictured above, and select Vimeo - Like a Video from the list of plugin actions:
Now map the input to its corresponding path.
That's it!
Available Path (* indicates a required value)
video_id* - The id of your video you want to like.
Unlike a Video - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/likes#unlike_video
Set up the API call
In this example, we'll be making a quick API call to Unlike a Video.
Start by creating a form to collect the necessary path.
Add a workflow action to the blue Unlike button pictured above, and select Vimeo - Unlike a Video from the list of plugin actions:
Now map the input to its corresponding path.
That's it!
Available Path (* indicates a required value)
video_id* - The id of your video you want to unlike.
Add Comment to Video - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/videos#create_comment
Set up the API call
In this example, we'll be making a quick API call to Add a Comment to a Video.
Start by creating a form to collect the necessary path and parameter:
Add a workflow action to the blue Add button pictured above, and select Vimeo - Add Comment to Video from the list of plugin actions:
Now map the inputs to their corresponding path and parameter.
That's it!
Available Path (* indicates a required value)
video_id* - The id of the video you want to leave a comment on.
Available Parameter (* indicates a required value)
text* - The body of the comment.
Upload Video to Authenticated User's Account from Link - Action Call
🔗
Vimeo documentation: https://developer.vimeo.com/api/reference/videos#upload_video
Set up the API call
In this example, we'll be making a quick API call to Upload a Video.
Start by creating a form to collect the necessary parameter:
Next, set up the API call by selecting Vimeo - Upload a Video from Link action:
Add in the value from your input. This should be a URL of a video already hosted somewhere -- either in your Bubble app or some other external source:
This action will upload the video to Vimeo. Keep in mind that you can reference the "result of" this step to capture details about the newly uploaded video, such as its name, embed link, and more.
Available Parameter (* indicates a required value)
link* - The URL of the video you're uploading.
Generate an HTML Upload Form
🔗
Vimeo documentation: https://developer.vimeo.com/api/upload/videos#form-approach
Set up the API call
In this example, we'll be making a quick API call to Create an HTML Upload Form.
Start by creating a form to collect the necessary parameters:
Next, set up the API call by selecting Vimeo - Generate an HTML Upload Form action and tie it to the blue button pictured above:
Now map the inputs to their corresponding path and parameter.
After this action successfully runs, you'll want to extract the "upload form" attribute and save this somewhere in your application:
We're setting a custom state value to hold the embedded form code, but you can choose to save this to your database as well.
In most cases, you'll want to display this "upload form" HTML code in an HTML element to present the user with an upload form they can interact with on their own. Any uploads processed through that form will automatically go to their Vimeo account.
Available Parameters (* indicates a required value)
name* - The name of the upload form.
description* - The description of the upload form.
redirect-url* - The URL to redirect the User to after they've completed the form
Changelogs
Update 13.02.23 - Version 2.1.0
- Updated documentation
Update 13.02.23 - Version 2.0.0
- Some data source have been changed to workflow actions. Review existing settings as this introduces breaking changes.
Update 28.08.19 - Version 1.5.1
- Updated to Vimeo version 3.4 (resolves error with Upload calls)
Update 27.09.18 - Version 1.5.0
- Fix to video responses with download link.
Update 20.09.18 - Version 1.4.0
- Added the video_files scope so that you can access a videos download link (must have a Vimeo Pro account at least)
Update 19.09.17 - Version 1.3.0
- Upload a video from a link
Update 11.09.17 - Version 1.2.0
- Max Results per page when retrieving videos
Update 23.08.17 - Version 1.1.0
- v2.0 Manage albums, like and comment, manage channel subscriptions
Update 23.08.17 - Version 1.0.0
- v1.0 List user's info, videos, albums, and search Vimeo