# Need help with html

**URL:** https://community.thunkable.com/t/need-help-with-html/585063
**Category:** Questions about Thunkable X
**Created:** [May 22, 2020, 4:10pm UTC](https://community.thunkable.com/t/need-help-with-html/585063 "2020-05-22T16:10:05Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 22, 2020, 4:10pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/1 "2020-05-22T16:10:05Z")

</div>

![2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/7/273e235ff6384aad4fa0f35c82ea43ee0a78ea15.png) How can i visualize this script in web viewer?

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 22, 2020, 4:30pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/2 "2020-05-22T16:30:39Z")

</div>

Hi @Balanced_Kitchen,

> [@Balanced\_Kitchen](#):
>
> How can i visualize this script in web viewer?

See this post:

> [@Remove html tags / replace \<br\> etc with its html style (Create a break) from api response](http://community.thunkable.com/t/remove-html-tags-replace-br-etc-with-its-html-style-create-a-break-from-api-response/120145/9):
>
> To display this text as in a browser, you need to use WebViewer and the data URI protocol. An example is shown on the scrHtml screen. [https://x.thunkable.com/projects/5cd84f23e3097f3353fdad45/project/properties/designer/](https://x.thunkable.com/projects/5cd84f23e3097f3353fdad45/project/properties/designer/)

Navigate to the srcHtml screen to see an example. I’ve used this before and it works.

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [May 22, 2020, 5:13pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/3 "2020-05-22T17:13:53Z")

</div>

Does this work for iOS devices?

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 22, 2020, 5:19pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/4 "2020-05-22T17:19:56Z")

</div>

To my knowledge, yes. Unless the Web Viewer has changed since I last tested this but I have had success with it using Wordpress API and a Web Viewer.

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [May 22, 2020, 5:25pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/5 "2020-05-22T17:25:42Z")

</div>

Does this work with JavaScript or only html?

I’ve never gotten JavaScript to kid eith this method. I gave up a while back. I remember it working on android but not iOS.

I used [quickchart.io](http://quickchart.io) until the webviewer POST method was released for this exact reason.

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 22, 2020, 5:30pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/6 "2020-05-22T17:30:44Z")

</div>

I don’t believe this is to do with graphs 🤔 Looks like it is to do with playing audio?

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 22, 2020, 6:11pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/8 "2020-05-22T18:11:09Z")

</div>

Yes! Playing audio.  
[https://www.muses.org/](https://www.muses.org/)

---

<div class="post-metadata">

### Author: ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)
#### Post date: [May 22, 2020, 6:16pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/9 "2020-05-22T18:16:47Z")

</div>

Sorry. I was more referring to the script in the snippet above. This is JavaScript. It was my understanding that JavaScript doesn’t work in the method mentioned above. I though to use JavaScript/interact eith the browser you have to use the webviewer POST command

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 22, 2020, 7:03pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/10 "2020-05-22T19:03:39Z")

</div>

Could you show me how?

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 22, 2020, 8:33pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/11 "2020-05-22T20:33:45Z")

</div>

@Balanced_Kitchen if it’s just an audio file you could host it via Cloudinary (this is possible if you set the file type to be a video, see [here](https://support.cloudinary.com/hc/en-us/articles/115003361672-Can-I-upload-audio-files-to-my-Cloudinary-account-)). You could also use a service like AWS.

See Thunkable Docs on the [Sound Component](https://docs.thunkable.com/sound#set-sound-source).

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 22, 2020, 9:11pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/12 "2020-05-22T21:11:46Z")

</div>

I want to make something more beautiful!  
For example:  
[https://x.thunkable.com/copy/aaa9c77ca2de35943164c993a8749516](https://x.thunkable.com/copy/aaa9c77ca2de35943164c993a8749516)

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 22, 2020, 9:53pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/13 "2020-05-22T21:53:23Z")

</div>

Thunkable is extremely powerful. It is possible to recreate something like this in the designer. The only external piece you will need is a gif of some sorts that has the colourful background. Everything else is pretty straight forward.

## (edit)

I made this up pretty easily: [Thunkable](https://x.thunkable.com/projects/5ec84ac2e946332eaa1c64ee/1f47fdbf-e15f-45bd-b5c5-403b5da48398/designer)

Basic gif background, I just nabbed this off of Giphy, used an online editor and a little bit of Photoshop to get the circle to fade out seamlessly around the edges. Basically I went ham on the blur. The original gif is square and so I just made up an overlay with a black background and the circular cut out in the middle.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/7/8/7875c39821d1162cad91371916b798fb87feabaf.jpeg)

I just fired in some components, the ring around the edge breaths. I didn’t bother looking too hard for a gif like yours but I thought I’d show you a way about doing something like the example you provided 🙂

Ideally you’d want to import the gif into something like PS, then make it rounded instead of using an overlay. This way you can change background however you like inside of Thunkable.

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 23, 2020, 4:25am UTC](https://community.thunkable.com/t/need-help-with-html/585063/14 "2020-05-23T04:25:10Z")

</div>

This is a very good idea. Thanks @eoinparkinson

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [May 23, 2020, 8:28am UTC](https://community.thunkable.com/t/need-help-with-html/585063/15 "2020-05-23T08:28:37Z")

</div>

I added information to the scrHTML page that my solution using the data URI does not work in the installed app on iOS.

To work with HTML, use WebViewer and the new PostMessage function. A universal example can be viewed on the scrExchange screen in the ACTech demo 2020 project.

But I think your example won’t work because of a security policy violation. It will work if you place it on a web server and use a link to it in the app.

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 23, 2020, 11:05am UTC](https://community.thunkable.com/t/need-help-with-html/585063/16 "2020-05-23T11:05:21Z")

</div>

Sound Component can’t play live streams for iOS. That’s a problem for me!

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [May 23, 2020, 12:49pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/17 "2020-05-23T12:49:01Z")

</div>

Use WebViewer for this.

---

<div class="post-metadata">

### Author: ![eoinparkinson](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eoinparkinson/32/143769_2.png) [@eoinparkinson](https://community.thunkable.com/u/eoinparkinson)
#### Post date: [May 23, 2020, 2:04pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/18 "2020-05-23T14:04:48Z")

</div>

It is possible to use WebViewer as @actech has said above, and also the video player component. I don’t know the exacts on which file formats are supported but here’s a test stream that I just grabbed from an m3u. `http://pri.gocaster.net/highlandradio` This plays on WebViewer and Video Player. You can use buttons to set the video player to play/pause.

I am unsure if Apple or Google will allow active invisible components.

---

<div class="post-metadata">

### Author: ![actech](https://avatars.discourse-cdn.com/v4/letter/a/3d9bf3/32.png) [@actech](https://community.thunkable.com/u/actech)
#### Post date: [May 23, 2020, 2:13pm UTC](https://community.thunkable.com/t/need-help-with-html/585063/20 "2020-05-23T14:13:12Z")

</div>

See my example. Perhaps it will help you.

scrRadio in the project [https://x.thunkable.com/projects/5d70f93f8a62b4079eedaff2/project/properties/designer/](https://x.thunkable.com/projects/5d70f93f8a62b4079eedaff2/project/properties/designer/)

---

<div class="post-metadata">

### Author: ![Balanced\_Kitchen](https://avatars.discourse-cdn.com/v4/letter/b/839c29/32.png) [@Balanced\_Kitchen](https://community.thunkable.com/u/Balanced_Kitchen)
#### Post date: [May 24, 2020, 6:20am UTC](https://community.thunkable.com/t/need-help-with-html/585063/22 "2020-05-24T06:20:23Z")

</div>

This platform has a lot of features, but also so many limitations. The sound component does not work properly under iOS and this requires the use of a web viewer. But then you are limited in using only “play” and “stop”. And the result is an ordinary player, but I like it.  
[https://x.thunkable.com/copy/0804fb57873bb9c2baf2cbc6bf550a27](https://x.thunkable.com/copy/0804fb57873bb9c2baf2cbc6bf550a27)

---

<div class="post-metadata">

### Author: ![ioannis](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/ioannis/32/146956_2.png) [@ioannis](https://community.thunkable.com/u/ioannis)
#### Post date: [November 8, 2024, 11:29am UTC](https://community.thunkable.com/t/need-help-with-html/585063/23 "2024-11-08T11:29:03Z")

</div>


