> ## Documentation Index
> Fetch the complete documentation index at: https://www.ayrshare.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Bubble.io

> Use the Bubble Ayrshare plugin or API Connector to manage your users' social media accounts

## Overview

[Bubble.io](https://www.bubble.io), a popular no-code platform, enables you to build web and mobile apps without writing a single line of code.
By integrating Ayrshare's social media API, you can manage your users' social media accounts directly within your Bubble app.

There are two ways to achieve this:

<ul className="custom-bullets">
  <li>
    **Bubble Ayrshare Plugin**: This user-friendly option requires minimal set up. However, it has
    limited functionality compared to the Bubble API Connector.
  </li>

  <li>
    **Bubble API Connector**: For greater flexibility and control, utilize the Bubble API Connector.
    This approach allows you to directly interact with Ayrshare's API, enabling a wider range of
    functionalities within your Bubble.io app.
  </li>
</ul>

This guide will walk you through both integration options.

## Quick Start: The Bubble.io Ayrshare Plugin

[Bubble is one of the most powerful no-code software development platforms](https://www.ayrshare.com/the-definitive-bubble-review-a-flexible-no-code-app-builder-growing-over-50/). The simplest way to get started is with Ayrshare's [Bubble.io Plugin](https://bubble.io/plugin/ayrshare-social-media-api-1607956467620x490188301088063500). See below for a more [advanced Bubble integration](/packages-guides/bubble#the-bubble-api-connector-plugin).

<div class="video-container">
  <iframe width="520" height="315" src="https://www.youtube.com/embed/x5e2pcKhkPI" title="Bubble Social Plugin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

First create an account at [ayrshare.com](https://www.ayrshare.com). Then connect your social media accounts.

<Card title="Connect social accounts" icon="link" href="/dashboard/connect-social-accounts/overview" horizontal />

Once your accounts are connected you can navigate to the API Dashboard and copy your API key.

<Tip>
  Remember that when you paste in your API key in your Bubble app, to include the word "Bearer" in front of your API key.

  For example:

  `Bearer bf55cc6f-76ac-46ce-b497-439d766f6c12`
</Tip>

Add the Ayrshare plugin via the Bubble plugin marketplace to your Bubble app. In the plugin field "API Key" enter your API Key.

Now you can send posts via your Bubble app to your social media accounts.

The image below is an example workflow call in Bubble to the plugin for an post with an image.
The video above explains this in more detail. Ensure that you are using the following parameter types:

<ul class="custom-bullets">
  <li>post: a text formatted as JSON-safe</li>

  <li>
    platforms: a list of texts where each text has parenthesis around it, such as
    `"facebook","instagram"`
  </li>

  <li>media: a text URL formatted as JSON-safe</li>
  <li>date: a date/time formatted as JSON-safe</li>
</ul>

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/bubble-ayrshare-example.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=e36f8c8ecd4ca4447b5b36ba77c06dcd" alt="Bubble Ayrshare Plugin Call Example" width="547" height="361" data-path="images/packages-guides/bubble-ayrshare-example.webp" />

The Ayrshare Plugin allows you to post and delete posts. To unlock the full power of Ayrshare, we recommend you use the Bubble API Connector Plugin and configure it with the endpoints that you need for your app.

## The Bubble API Connector Plugin

Alternatively, you can use the Bubble API Connector Plugin to access the full power of the Ayrshare API. Here is a video which will get you started using the Bubble API connector with Ayrshare and walks you through how to post multiple images per post.

<Info>
  Bubble's API Connector can sometimes be tricky where missing a single closing quote or space can
  cause the connection to fail. We recommend watching the below videos carefully and re-reviewing if
  something isn't working.
</Info>

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/5xXvIDViUzY" title="Create a Post from Bubble" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

Below is another tutorial video showing how to get social profile analytics in Bubble.

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/OunO2IS-A7Y" title="Get Analytics in Bubble" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## Post to Multiple Social Media Accounts

Here is a article with an overview:

<Card title="Post To Multiple Accounts From Bubble" icon="link" href="https://www.ayrshare.com/post-to-multiple-social-media-accounts-from-bubble/" horizontal />

## Validate Bubble Post Data

When posting to Bubble via the API Connector, it can be difficult to determine if you are sending valid JSON. Often if the JSON posted to Ayrshare is invalid the response will be HTML.

Ayrshare has a /validateJSON URL that allow you to post to instead of the typical /post endpoint. It will return "Valid" or "Not Valid". Be sure to set the Content-Type as `text/plain` instead of the typical `application/json`.

Click the Troubleshooting link for "Response Returns as Bad Request" to see the details.

<Card title="Troubleshooting" icon="link" href="/help-center/technical-support/response_returns_as_bad_request" horizontal />

## Upload Media Files in Bubble

Use Bubble's File Uploader to upload your media files. These files are stored on Amazon's S3. You will receive back a URL that can be used in the `mediaUrls` body parameter of the `/post` endpoint.

## Generate JWT Token in Bubble

To generate a JWT Token in Bubble, first you need to Stringify the private.key you send to the [/profiles/generateJWT](/apis/profiles/generate-jwt) endpoint.

**Step 1:** Go to [https://onlinetexttools.com/json-stringify-text](https://onlinetexttools.com/json-stringify-text) and paste in your private.key in the left-hand input text section. Then copy the stringified text on the right side to your clipboard.

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/jwt-token.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=01928d50ee7f94b05c7ce241f34ca904" alt="Verify your JWT Token" width="800" height="359" data-path="images/packages-guides/jwt-token.webp" />

**Step 2:** In your Bubble app, create a new call with the API Connector as shown below. The text in the `privateKey` field in the Body area is the stringified text that you created in step 1 above.

Also include your provided `domain` and `profileKey` as shown below.

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/Enter%20the%20JWT%20Token%20in%20Bubble.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=73120fa7aa6b671ebabe1ec0dcd15ad4" alt="Enter the JWT Token in Bubble" width="800" height="738" data-path="images/packages-guides/Enter the JWT Token in Bubble.webp" />

**Step 3:** Click the **Initialize call** button and save the response. The `url` field in the response is what your user will click to access the social media accounts linking page.

<img class="center" src="https://mintcdn.com/ayrshare-docs/6mPR4kmwNEz1kMbX/images/packages-guides/Verify%20API%20connector%20return%20in%20Bubble.webp?fit=max&auto=format&n=6mPR4kmwNEz1kMbX&q=85&s=c32681f3e73024eb8c4f561595f222f6" alt="Verify API connector return in Bubble" width="800" height="572" data-path="images/packages-guides/Verify API connector return in Bubble.webp" />

## Allow Users to Link Their Social Accounts

If you are using the Business Plan or Enterprise Plan, this video shows you how to set up Bubble to enable all your users to link their social accounts.

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/C2QWLMkBbKg" title="Social Media Account Linking" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## Rewrite Text and Post to Social with AI in Bubble

How you can use Ayrshare and Bubble.io to build a rewriting and social posting app. The app takes some text, rewrites it 5 different ways, and posts it to your social accounts.

<div class="video-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/Szrt6hUEzkw" title="Rewrite your Text" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" />
</div>

## Bubble API Connector

We recommend using the [Bubble API Connector](https://manual.bubble.io/account-and-marketplace/building-plugins/adding-api-connections) to make your Ayrshare API calls.

Please note that Bubble will time out all API calls after 150 seconds and then retry the call once more. Large video might take longer than 150 seconds, which will cause Bubble to automatically try the post once more and result in a duplicate post error. We recommend using a [schedule post](/help-center/technical-support/response_bad_gateway_502_or_504_error) for larger videos.

## Useful Bubble Blog Articles

* [Build a Social Media Posting Mobile App with No Code](https://www.ayrshare.com/build-a-social-media-posting-mobile-app-with-no-code/).
* [How to Create a Social Media Scheduling App with No Code.](https://www.ayrshare.com/how-to-create-a-social-media-scheduling-app-with-no-code/)
