# Custom Component (AI Generated) - Feedback wanted! 💡

**URL:** <https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533>\
**Category:** Archived Announcements\
**Tags:** ai, layout, components\
**Created:** [July 2, 2024, 1:49am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533 "2024-07-02T01:49:43Z")\
**Posts on this page:** 20\
**Page:** 4

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [July 10, 2024, 6:37pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/62 "2024-07-10T18:37:12Z")

</div>

Strange - my App becomes just a blank white screen.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 10, 2024, 11:33pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/63 "2024-07-10T23:33:25Z")

</div>

> [@Joe\_Gabriele](#):
>
> Does come with a white background that I cant get rid of but does work

You can inspect and get the code, then try to edit its background color, paste back into the HTML version of the component.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [July 10, 2024, 11:45pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/64 "2024-07-10T23:45:14Z")

</div>

Yea I tried, but couldnt identify it. I also copied the html and looked like a giant rat nest where identifying what was adding then whole background was beyond my skillset lol

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 11, 2024, 12:03am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/65 "2024-07-11T00:03:06Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88a69cdfaaaef70b21d933958528c096a7bf3c68.png)

It was working for me yesterday. If you have this part like me, it’s the “bg” thing.

```auto
<body
  x-data="state"
  class="flex items-center justify-center bg-[#0a0a0a]"
  style="height: auto !important; padding: 0;"
>

```

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [July 11, 2024, 12:31am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/66 "2024-07-11T00:31:27Z")

</div>

Ok cool, I will take a closer look at mine! Does your bg adapt to dark mode? When I applied dark mode, it only adjusted the next and toggle.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 11, 2024, 12:34am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/67 "2024-07-11T00:34:13Z")

</div>

My client had dark mode set for his app so I didn’t have to adapt dynamically. I think we can make it work with CSS though.

---

<div class="post-metadata">

**Author:** ![Joe\_Gabriele](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/joe_gabriele/32/57595_2.png) [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)\
**Post date:** [July 11, 2024, 1:22am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/68 "2024-07-11T01:22:00Z")

</div>

Found my code:

```auto
<body x-data="state"
class="flex items-center justify-center bg-transparent">

```

Looks like the background should not appear at all. Changed to to your color and didnt have any impact. Also tried V2 and made it worse lol

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [July 11, 2024, 8:47am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/69 "2024-07-11T08:47:21Z")

</div>

Posting again - I have added a custom component to a couple of different Apps. They all work well in the editor. However, when testing the live published versions on PC or mobile, the screen briefly flashes up the correct screen then goes 100% blank. Deleting the new components restores the apps back to normal. Clearly the new custom components are responsible.

I believe others are experiencing this issue too… any tips or pointers please?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [July 11, 2024, 9:22am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/70 "2024-07-11T09:22:37Z")

</div>

Custom components currently only work in the builder. According to info we got from David, they should work in the player (published App) later this week.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [July 11, 2024, 10:51am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/71 "2024-07-11T10:51:53Z")

</div>

I worked that out yesterday… I had an app that went blank … sometimes. It turned out that it was using a custom component (the one I had with the audio player) that blanked out screens. I finally worked out that it was the custom component when users used it… so I then switched it off (and achieved my audio player in the normal way).

---

<div class="post-metadata">

**Author:** ![Gregory](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gregory/32/21180_2.png) [@Gregory](https://community.glideapps.com/u/Gregory)\
**Post date:** [July 11, 2024, 6:16pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/72 "2024-07-11T18:16:04Z")

</div>

I try to make a more collaborative text editor, where users have their own text colors. Best would be, if the color is stored in the user profile table.  
So far, they need to choose them at every text editor:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/7/2739677e6f8a4d8b07b0d6114a3f783f29f09769.png)

The following prompt recolors the whole text, when I change the user in the editor:

> Newly added text is colored in the users’ own colors. These colors are stored in Text\_Color

Do you have an idea for a better prompt?  
Any advice is highly appreciated.

---

<div class="post-metadata">

**Author:** ![Edilson](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/edilson/32/70793_2.png) [@Edilson](https://community.glideapps.com/u/Edilson)\
**Post date:** [July 11, 2024, 8:55pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/73 "2024-07-11T20:55:26Z")

</div>

I truly love tath, see what i do:

![GravaodeTela2024-07-11175321-ezgif.com-video-to-gif-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/b/abb7129bcf5d54c2c3f56a611319a50527efe8a1.gif)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 11, 2024, 11:50pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/74 "2024-07-11T23:50:01Z")

</div>

> [@Darren\_Murphy](#):
>
> According to info we got from David, they should work in the player (published App) later this week.

At least my custom component, which use the HTML mode, is working normally.

---

<div class="post-metadata">

**Author:** ![Mike\_Hall1](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mike_hall1/32/60927_2.png) [@Mike\_Hall1](https://community.glideapps.com/u/Mike_Hall1)\
**Post date:** [July 12, 2024, 12:38am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/75 "2024-07-12T00:38:15Z")

</div>

This is unbelievably awesome. Like magic I’m stunned

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [July 12, 2024, 10:40am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/76 "2024-07-12T10:40:00Z")

</div>

Looks like the new custom component is down today.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/david/32/62831_2.png) [@david](https://community.glideapps.com/u/david)\
**Post date:** [July 12, 2024, 2:22pm UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/77 "2024-07-12T14:22:42Z")

</div>

We haven’t merged it.

---

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)\
**Post date:** [July 15, 2024, 12:19am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/78 "2024-07-15T00:19:22Z")

</div>

Absolutely great, thanks.

When using **HTML custom component, can we link to Glide actions**?  
without doing a whole javascript inside the html component.

I want my 3 pricing cards to trigger 3 differents actions. By clicking on it. You can swipe the cards.  
Show webview payment for offer basic  
Show webview payment for offer premium  
Show webview payment for offer entreprise

My UI work around for now: a multiple buttons component below…

 ![Screenshot 2024-07-14 at 20.01.15](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/2/6259fc58a80a46facc27b9e0e9be9b6f0a17e074.jpeg)

![Screenshot 2024-07-14 at 20.00.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/9/e986f019c3395e73a41874cfdf508835f34b61a7.png)

 ![Screenshot 2024-07-14 at 20.16.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/8762bc68793b5840869b6d8b300dff9c6240958c.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 15, 2024, 12:27am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/79 "2024-07-15T00:27:42Z")

</div>

> [@Timestamp task worked on per user](https://community.glideapps.com/t/timestamp-task-worked-on-per-user/74885/3):
>
> HTML: \<!DOCTYPE html\> \<html lang="en"\> \<head\> \<meta charset="UTF-8" /\> \<meta name="viewport" content="width=device-width, initial-scale=1.0" /\> \<title\>AlpineJS Stopwatch\</title\> \<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.min.js" defer \>\</script\> \<style\> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; heig…

Here’s my attempt yesterday.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [July 15, 2024, 12:29am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/80 "2024-07-15T00:29:43Z")

</div>

> [@Martin\_B](#):
>
> When using **HTML custom component, can we link to Glide actions**?  
> without doing a whole javascript inside the html component.
> 
> I want my 3 pricing cards to trigger 3 differents actions. By clicking on it. You can swipe the cards.  
> Show webview payment for offer basic  
> Show webview payment for offer premium  
> Show webview payment for offer entreprise
> 
> My UI work around for now: a multiple buttons component below…

I think the best workflow for me is to prompt either using Glide’s AI version, or using Claude/OpenAI.

Then, I get the underlying code that the LLM generates, connect the actions to the component, and reference them where I want to in the code. That makes sure I get the full control of the code and not relying on the prompt (which is impressive from Glide nevertheless).

---

<div class="post-metadata">

**Author:** ![Martin\_B](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/martin_b/32/74360_2.png) [@Martin\_B](https://community.glideapps.com/u/Martin_B)\
**Post date:** [July 15, 2024, 12:36am UTC](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/81 "2024-07-15T00:36:15Z")

</div>

![Screenshot 2024-07-14 at 20.32.22](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ff3ae9daec30fc85a46f0545be00badac451dc07.jpeg)

i have this whole piece of html/css in a single html custom component with a button designed in it.  
how to connect the button part to the normal glide actions? there is an ID for action or something like that?

Maybe i didn’t understand your answer Thinh  
i know how to use rich text actions.  
But with the new custom component HTML generator… ?

[Previous page](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533.md?page=3)

[Next page](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533.md?page=5)