This week the Circle.so team was kind enough, after attempts to get Bubble SSO setup with them (we got 90% of the way there) to just build the integration.
And I just got done with this Bubble.io x Circle.so tutorial after the Circle team worked with me to get that official integration live.
@emmanuel & @Bubble let me know if there is any additional info you see I’m missing in this Notion doc, as this will be shared by the Circle.so team directly from their docs. Also - thank you to Eve and Malcolm for the assistance in providing great technical support to make this happen!
For anyone who needs a good community forum software, Circle.so is amazing. They allow you to embed whole topics, single topics, or even the entire app into your bubble site if you wanted to. And now, with a Bubble SSO integration, they can sign in/up with your Bubble app’s account.
Thanks for this! Super helpful! I was pulling my hair out getting an error {“statusCode”:400,“message”:"Invalid client_id: XXXXXXXXXXXXXXX} message, which seemed to magically resolve when I published to live. Is there something going on here where the integration won’t work in the development version?
Also – might be worth putting a little asterisk not to disable sign-on via circle until AFTER you have the SSO working (I locked myself out because I turned that off before the integration was working, then couldn’t sign in to change the circle settings I needed to to get it to work!)
great idea Maria! Just updated the tutorial doc with this!
As for the first issue - I am not sure it’ll be able to be run until your new SSO settings are published to the live app. So that’s correct! and is an annoying quirk
Hi! Has anyone successfully integrated Circle as a page within their Bubble app by utilizing this SSO process? Also, are there negative effects in terms of SEO for utilizing this third party option?
Hey there! Have you used their embed option? If they’re logged in on the bubble side it should display their user info on the Circle side if you’re embedding inside your own bubble site.
SEO downsides would be a good question for the Circle team!
Hi! I just managed to embed the entire community onto a page. Now I just need to figure out how to limit space access based on Bubble user type. Thanks @joe5 !
I set up the SSO but it just won’t work. Is the SSO supposed to automatically create Circle accounts for anyone that signs up for my bubble app? Will it log them in once they are logged in to my bubble app? I have walked through the set up process 3 times and have found no errors. Any help would be appreciated!
EDIT:
It randomly started working 6 hours later… However, users are now asked to fill out profile information despite filling out their full name and automatically being assigned an avatar.
Did you figure this out? I want to allow all users to view public spaces on Circle.so, but only my paying Bubble members to see the private spaces on Circle.so. This would be super awesome if this SSO option recognized the account type/if the user is paying or not (I have a field that says “paying” and it is a text field, it will be either “yes” or “no”), that way the onboarding to Circle.so is just that much smoother.
Create an API key in circle. Create a new API in the bubble API connector plugin and add this as a Shared Header for all Calls parameter titled “Authorization” and paste your key as [Token “your key”]
Run the Community Index call to get your community ID (needed for all other calls) write this ID down.
It is a GET call with the following url: {{host}}/api/v1/communities
Note that {{host}} should be your circle return URI. For my it is https://community.”my domain”.com since I set up a custom domain.
Run the API Space Index call to get the IDs for all of your spaces.
It is a GET call with the following url: {{host}}/api/v1/spaces?community_id={{REPLACE THIS WITH YOUR COMMUNINTY ID FROM STEP 2}} (don’t keep the {{}} either)
For the closed spaces, write down the IDs and you will use them later to add members. I find it best to click the “Show raw data” button at the bottom of the results when you first initialize the call to have a nice text to copy and save in Word.
Set any spaces that you want to be open to all users as automatically joined in your Circle settings. No need to add members to these spaces via the API.
Set up the Add Member to Space call as an “action”
This is a POST call with the following URL: {{host}}/api/v1/space_members
add the following parameters:
email (use any Circle member email for initializing) UNCHECK private.
space_id (pick any of your spaces IDs for initializing) UNCHECK private.
community_id (set to your community ID from step 2 and leave it as private)
This is the action you will use to add members to specific spaces. It will appear in your Bubble workflows since it is an “action” and you can set the email and space_id dynamically because you unchecked the “private” button.
There are a few other useful calls. I am setting members tags via the API. I am also inviting members upon sign up via the API so that I automatically have their names and emails (no need for another Circle sign up). I thought this was done automatically via SSO, but it isn’t.
Wow thanks for the detailed instructions! I’ll give it a try and start implementing it now. If I come up with any issues, I’ll let you know. Again, thanks so much, you have no idea how helpful this is!
Thanks for the awesome instructions! This was my first time working with the API Connector in Bubble.io and I got it to work on the backend when initializing which was exciting. I added another API call called “Create Member” (i.e. inviting a member) and realized I can just add the member to the space_id in that call instead of using a separate “add member to space” call. So, when I onboard my users, they will be created as a member in Circle while being added to private spaces. If I ever create a page in the future on my main domain on Bubble that has a list of all the spaces (including private ones) and I have some need to use the “Add Member to Space” call, then that’s when I will use it.
I have a question on how you did member tags. Are you able to add multiple tags at once or only one tag? I’m not really sure how to add more than once at a time. I added 3 keys called “member_tag_id” but in the action, it only shows one entry area (although it didn’t get upset or show an error when I had multiple tag IDs for the dynamic data).
Also, did you have any issues inviting members upon signing up? As you’ll see below, I received an error code when in Dev mode (haven’t tried in live mode).
Also, I am running this in Dev mode and received this error when trying to add create/invite a new member (which also encompasses the adding of the user to a Space as mentioned above). Is this occurring because I am trying this in Dev mode, because it’s only been 15 minutes, or some other reason?
You are very welcome I was also planning to add members to spaces upon invite, but I found that it just didn’t work. Member tags only takes a single ID so you have to use multiple workflows if you want to add multiple tags. I’m glad you were able to get this working! My only two concerns right now are that Circle is not setting the avatars of my users and how to have my Circle links help my Bubble SEO.
I think the issue is that I am not on the professional or enterprise plan yet. I have a call scheduled with a person at Circle in 30 minutes so I was going to wait until after that to pay for Circle.so. I hope that is the issue.
Are you on either of these Circle.so payment plans ?
I was also planning to add members to spaces upon invite, but I found that it just didn’t work. Member tags only takes a single ID so you have to use multiple workflows if you want to add multiple tags. I’m glad you were able to get this working! My only two concerns right now are that Circle is not setting the avatars of my users and how to have my Circle links help my Bubble SEO.