Building Custom Widgets with AI in CC

[Speaker 1]
All right, good morning everyone. So yeah, my name is Julien, I'm coming from Brussels and I work for Doctors Without Borders or Médecins Sans Frontières. I've been working there for the past 10 years.

And so what I do within my unit is to improve the access to information, knowledge and support for our logistical staff who are active in operation. And so if you're not familiar with Doctors Without Borders, we provide humanitarian aid to areas and countries in the world that need it the most. And so with Gainsight, we're only using the CC component, so the customer communities, and we use it not for customers, but as an internal community for our staff in operations to improve their access to information, share knowledge between each other and look for support in a more transversal manner.

So whether or not you're in a support position, everyone who's part of this community can come and support each other within the community. And until we launched the community, we had already networks of support between people, but it was used through informal channels like WhatsApp groups, Steam channels and things like this. And so by putting up an official community for staff, it allows a democratic access to the support and to allow everyone to sort of jump into the conversation and support each other.

So yeah, that was the introduction about our use of community, but today you're here for custom widgets. So first of all, the objective of the workshop is gonna be my attempt to speak in simple terms about technical stuff. So then also you'll get to explore the Gainsight widget features that allow you to create a more personalized environment within your community.

You'll get a bit more comfortable to use AI to generate code. This workshop here is a bit made for people who are not necessarily comfortable with codes, but still want to create a more personalized environment for their users. And yeah, and then at some point when I'm done talking, we're gonna be building widgets together.

And so hopefully you'll get also to leave the workshop with a little snippet of code that you can perhaps adjust and enhance in the future, but that you can integrate into your community. And so we're looking for your creativity and curiosity today. So why custom widgets?

I revealed a little bit how you can use custom widgets already, but first of all, what is a widget? A widget is a little block of, a visual block that you can add onto your community and basically the whole community platform is built out of widgets. So your homepage is just a collection of widgets where you have a search bar, you have the latest content, I don't know, the most recently awarded badges.

All these things are blocks that you can hide, add, customize, and they're widgets. And so Gainsight makes available a few widgets out of the box. But then you can also use HTML widgets, we'll see a bit what this is, and then develop your own, let's say library widgets through Developer Studio to build your own customized widgets and go beyond what's available outside of the box.

Through widgets, you can also simulate engagements and create call to actions for users, so you can really sort of have users perform certain actions. These are some examples of things that I built for Doctors Without Borders. I'm not gonna go through all of them, but for example, to show you a bit how I extended the availability of widgets and went beyond the boxes, I thought that users couldn't see what were all the badges that were available on the platform and the ones they could earn and the one they had earned already and how they can move on to the next level of badges.

So I created an overview where the user gets that an overview widget where a user goes to the specific page, will see all the badges he's earned or she's earned and what are the next ones that he or she can unlock. Also, we have a bunch of communities in our community platform, so it's all like split up by department. We have the medical community, the logistic community, finance, et cetera.

But there's no overview on which ones you're subscribed to or the ones that are available to you, so now I create also a widget where users basically can see in one click, subscribe to the various communities they want to be notified about next time they get a, there's a new post within the community instead of visiting each single page and subscribe to every single page. And then yeah, there's a bunch of other things, like for example, like the profile completion, promoting users to sort of update their profile and reach 100% for example. So yeah, widgets and AI.

So at the moment, but I think my workshop is soon going to be irrelevant with the announcement that they made today with the Agent Studio. So there's two type of widgets that you can make and create custom widgets. You have the HTML widgets.

So this is already available out of the box. It's a widget where basically the input is code. So whatever you put in there, it will reflect within the widget.

So there's no configuration, there's no preset sort of like type of information you can display. It's like really like the world is your oyster. You can just do whatever you want with it.

The only thing is that, yeah, you still have to deal with code. For me, for example, within our organization, I'm the one who's like kind of building these codes. I mean, these widgets, but then we have other community managers who are responsible for their respective community and they're not necessarily comfortable with code.

And so this is not like the best way for them to be able to perhaps manage and customize their landing page of their community because they have to, perhaps if they want to make changes, they have to edit a bit the code and they're not necessarily comfortable with that. Luckily now there's AI also that can help you with this and you can give some prompts and the AI will generate the code for you. So that can be helpful.

It's very useful also to get something very quickly. The widget is already there. Place your code and you see the result directly.

So someone was raising their hands. I don't know, that was a question. Yeah.

Yeah. Yeah. Yeah.

Gainsight, you mean you're using Gainsight as, you're not, ah no, this is more like maybe if you want to explore the features of Gainsight maybe, but yeah. No worries. Yes, all right.

Then the other one is developer studio widgets. I mean, I don't know how you're supposed to call them. I call them like this or you can say like library, custom library widgets because once you create these widgets via developer studio, they are part of the library.

They're among all the out of the box widgets and you select it. The only downside is that it requires a bit of setup. You need like a coding interface.

You need to save your code in some like repository and link your community to this repository. So you might need some ICT support with this and like maybe some validation because not all the tools within your organization are validated and things like this. So it's a bit of a slow start, let's say, but then once it's set up, it's actually quite straightforward and very easy and very powerful because then it really works with, I mean, you decide how much you want to prompt and how much you still want to edit the code, but if you want, you can just do prompts and write text and basically develop widgets just by typing words basically.

And basically the AI behind is just like sorting out all the codes, creating the folders and that are necessary to generate the widgets. With this, like I said, it's integrating your library of widgets. You have even, that comes with it, you even have like a configuration panel.

So then your community managers, they're not dealing with code anymore. They're just dealing with some sort of pre-made widget that says, okay, I'm showing maybe the list of users and then you can configure with the configure panel. I want to see like only the top 10 users that have recently joined, for example.

And you can do these parameters in the configuration. So it's like dropdown text and things like this and check boxes that community managers have to deal with now and it's much easier for them. Also, if you want to make a change to your widgets, let's say you want to change how the background is, the background color, as a simple example, you change it at the source and then wherever you're using the widget on your platform, if you use it like 10 times, the change will be pushed to all these widgets that are being used, whereas with the HTML, the code lives where you place it.

So if you're using 10 times the same HTML widget and you want to change the background for each of them, you have to go in each of them and change it. Well. And soon, Agent Studio, yes.

But today, like I said, DevOp Studio is a bit complicated setup. Not everyone has access to this and we're not gonna, we're gonna lose a lot of time if we start to set it up for everyone. So we're gonna work with HTML widgets and your AI chat, or I don't know how you call this, of choice, and generate code for the HTML widgets.

First of all, before we get into the workshop part, I wanted to also explain, and I'll try to be simple also, explain the toolkits that you have at your disposal to get information from your community. Because in a widget, perhaps you want to display information that's relevant to the user that's currently logged in, promote some content that maybe they're based on communities they're following or subscribing to and things like this. And so you have the Web SDK.

The Web SDK allows you to basically get information from the platform. So for example, and this is what we're gonna use in this workshop, is that the context user. So you get information about the current user.

Well you know the user, the username, you can get the profile picture, you can get the role, the rank, the joint date, et cetera. Earned badges, et cetera. This is what it looks like if you look in the code format, but you're not gonna have to deal with this, don't worry.

And then you have the community API, which is basically normally the API is made to sort of communicate between platforms. So for example, I don't know, using Zendesk for certain things, I mean I think inside has a connector with Zendesk, so maybe that's not a good example, but a different platform you want to send some community question and display them on some external website, you could use the API to display this kind of content. But it also, in our case with the widgets, it also allows you to get additional information that the Web SDK that we just saw earlier is not able for you to get.

So for example, the list, yeah. So you can get like the list of users, you can get all the posts, you can get all the badges that exist on your platform and things like this. All right, so did this sound too technical already?

Yes, probably. But so don't worry, I made kind of a prompt that you'll be using where I shared already all these kind of information in the prompt so that when you get started, you just upload this thing and then you continue the conversation with your AI. But so yeah, this prompt that I made is basically giving some input as like the game site references, so documentation about the API, the Web SDK, how it works and all that.

Some design rules, so for example, if the, I don't know, like you've set up like the brand colors on your site, so it's like purple and all these things, so it will like sort of fetch this and reuse it so that your widget is still already like in harmony with the rest and it doesn't like, you know, come with like orange colors and the rest is purple. And then desired behavior. Sometimes AI can be very chatty and ask you follow-up questions and all these things, so I tell it like to go straight to the point, don't be chatty.

Always resend me the full code because sometimes what it does is that it sends you a line to correct. You don't want to go through the code and correct that line, so like every time, send me the full code so then you can just copy-paste and you don't have to look at it. Yeah, so that, because if you don't give context, basically the AI just knows the whole web, so it doesn't know you're working with Gainsight, it doesn't know all these documentation, so it's gonna just try to build something with little information basically, or too much information.

Yeah, these are common pitfalls, but you have the slides on the table, so I'm not gonna go through all of them, but like basically sometimes you can go into like some AI rabbit hole where like there's an expression in French where like you're having a deaf conversation, so like everyone's just like talking to each other, but they're not listening, and so sometimes with AI you get to this point where like it just keeps giving you what you're not expecting, and so at some point, well, it's better to just take a step back, rephrase, maybe write it more simply, and then also, yeah, poor prompts, well, results in poor code and sometimes hallucination or it's making assumptions and all these kind of things, so also try to give as much detail and try to be as, yeah, to describe what you're looking for.

Yeah, so it's widget time. So first I have like a poll, Mr. Poll. So who has experience with these widgets, whether it's custom or out of the box, but you can vote with the app if you want.

I see the majority has no experience, it's just, it's good now, already? Okay, well, apparently it's good, but so if there's like too many people who have experience at a table, maybe it's better to sort of split because then we kind of like mixing a bit the expertise and the skills. But so, yeah, the idea is that you'll work as a group, so it's okay if not everyone has a laptop, I mean, you can still do it on your own, but the idea is that you kind of like work together, so it's okay if you don't have a laptop.

But so then you'll have some logins on the table, you have a URL, so you can go to the, we made a demo site where you'll be able to build your own widgets, and so you have each a login, and you have a table number, so once you're on the demo site, you can also go to your dedicated page. Okay, has everyone been able to log in, the ones who are trying to log in? Yeah, all good?

Okay. Yeah, so once you're on the site, once you've logged in, you, well, so we kind of place, oh, you don't see the screen here, he needs to. Yeah, my bad.

Yes, so once you're on this, yeah? You can't? Ah, yeah, and that's maybe a thing with your company, maybe.

Yeah, otherwise you can share a laptop with someone else.

[Speaker 2]
Yeah, yeah, yeah, yeah, yeah, okay.

[Speaker 1]
Guys, can I show you what you have to do once you're logged in? Yeah? Still listening, yeah?

Okay, so you scroll down, and then you find your table, so normally each table is numbered, one to 11, I think, and you just click on the table. It's a coin, you click on your table, basically, and this, you'll get to the page where you'll be able to add your widgets, so each table has a dedicated page, and then after, if we have time, we can go through everyone's page and look at what people made, so this is the page where you'll be adding your widgets. So you guys are table two, so you should be on page two.

Yeah? Yeah? You can do if you want something else, if you think it's too simple, but.

You can try, yeah, yeah, yeah. Table seven? And so now, okay.

Okay, and then, so then you have, if you lower down, you have three options. Widget number one, you can make, and so they kind of like increase in difficulty, so you can choose your challenge, so a welcome banner, it's just like, hey, Julian, welcome back, and so it picks up the username, basically. A profile card, so you display my, I mean, not mine, your, or like the person who's visiting the site, the profile picture, the username, the location where they're based, like profile fields, and a link to the profile page, for example, and then the badge explorer, so this is, the last one is using also the API, not just the SDK, and so it's just that widget that shows all the available badges, and then does a check mark if the user has the badge, and otherwise, it's just a bit grayed out, and shows, I mean, that's, you'll define how that looks like, and so if you click on the widget that you choose, then you get to a guide, and it explains you what you can do.

Widgets, so for example, table two has a little, even a little dolphin jumping when you hover the, and so that's the user profile card, that's the widget number two, but, has any other tables published their work yet, so we can check? No, everyone's ashamed? I'll check maybe, what, table one, they seem to be busy, let's see.

Nothing. Four. Here we go, we got the profile card.

I think, where's the banner, all right, you need to publish, all right, it's all the way up. Hi, welcome back, Julian, nice. Blue beam, okay.

Very nice. Okay, any other tables? No, yes?

Soon. These are? Ready?

What table are you guys? 10? Okay, we got the badges.

Ah, that's like everything combined in one. Can see my latest badges, can see my rank, how many posts I've made, I've earned two badges, and last visit was today, nice. And then, the welcome banner has an issue, it's loading, apparently.

But nice, nice. Very nice. I don't know how much time we have left.

Oh, okay, okay. Okay, so we have about seven minutes left, so are there any questions, or things you'd like to clarify? Or, yeah?

Yeah. Yeah. Yeah, yeah, true.

No, it's true, yes. So there, I think it depends how your AI is building the codes, I think it's perhaps the way it was built here, it was weighed on a page load to see the thing, and sometimes it builds it directly, it does the code of data directly, so yeah, I don't know, it's a bit like, I think, random, the way sometimes it decides to build the thing, and so some, yeah, it's true, I've had that with my own widgets, too, so yeah. But, if you want, I can show you also a bit higher works on the Doctors Without Borders community, just to show you one thing. So, here I've made some other, these are developer studio widgets, just to show you that when you go to the next step, where it's all built and integrated into your library, you can see the recently online, this is one that I made quickly, and so when you go and edit, and you wanna see the recently online members, no, I'm not dealing with HTML anymore, I'm just customizing the color, I want a gradient, I wanna filter them maybe by background, so I wanna see only logistical stuff, so it's reloading, et cetera, and so this is, when you go further after the HTML widget, and you start building really, like widgets are integrated to your library, you can have just an easy configuration panel that makes it much easier to sort of customize still the widget.

I'll try to show you this user directory thing that I made. Let me see, it's here. Oh yeah, here we go.

So at the moment, I think the inside is working on it, but at the moment the user directory doesn't exist on the front end, so it only exists for admins, and so I just, yeah, just like in 20 minutes, I think I built this, and so you're able to search for users, you can even filter by, this is where the user is located, so there's like Brussels, Amsterdam, all these kind of things. There's an issue now, but like, yeah, you can filter on specific user fields, et cetera, et cetera. Can you filter by match?

You, oops, well now my thing is failing, but. Let me check. Sorry.

But yeah, yes, normally you would be able to filter by badges if you want, yeah. You give that as a prompt, and then it will build the code for it. But so, wow.

We are, I think we're reaching 10,000, yeah. Yeah, yeah, yeah, yeah. And so sometimes you have to do like what's called pagination, so like basically it gets them 100 at a time, and so you have to do the call multiple times to, yeah.

[Speaker 2]
Yeah, yeah, yeah, yeah, yeah.

[Speaker 1]
So every time I load the, so I've done a setting where like, either it does the call every time you load the page, or when you reload, it redoes a fresh search, or you can say, like put in your, you know, like in your cookies, and so basically for 24 hours, it will be the last call that you made, and then, so then, because sometimes it takes a while to load the whole list. Yeah. Yeah.

Yes, yeah, yeah. So that's why I started like adding this setting. Yeah, yeah, yeah, yeah, yeah.

All right, I think that's it. Four minutes? Okay.

No, I don't see it. Okay, we're four minutes. More questions?

No? Let's see if the thing is back. Ah, it's back.

There you go, we're back. I want to, maybe the badges. Ah, yeah, maybe on the demo site.

Well, actually, I made also a user directory, actually, on the test site, so if you want to see, and this one is made in HTML, so you can even copy the code if you want. So you click here, and then you get the code. So the page is a slash P, and then Julian, and then you can see the code for the user directory.

Yeah, ah, oh, good. So some people have asked if the website, the demo site's gonna be live for a bit, so Julian confirmed for the next month, it's still gonna be there. So if you want to still like go back to it, it's just at some point, they're gonna cut access to it.

It might still be like visible, but because they don't want to give admin access for a long time to this thing, so at some point, it's gonna be cut, but so if you want to look at it tomorrow, it will still be accessible, and the next weeks also. Thanks.

[Speaker 2]
Thanks, thanks, Julian. Thank you for your amazing session. Let's give big applause to Julian for today.

Thank you.