[TW5] How Do I Embed a Chat Box Into a Tiddler?

[kasaduen...@gmail.com]

Does anybody know?

Thank you in advance! :)

[Jed Carty]

What sort of chat box? I think we need more information than that.

[kasaduen...@gmail.com]

Oh! Right..sorry about that. xD

The chat box is called ChatButton. Here's the website --> https://www.chatbutton.com/

It rendered this url for the chat --> https://www.chatbutton.com/chatroom/18383458/

I don't know what .html really refers to, but it came with this html to somehow embed into a site..

<iframe name="CHATBUTTON_CHATBOX" id="CHATBUTTON_CHATBOX" src="https://www.chatbutton.com/chatroom/18383458/" width="300" height="450" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"><a href="https://www.chatbutton.com/chatroom/18383458/">Enter Chat Room</a></iframe>
<script type="text/javascript">
CHBT_channel="18383458";
CHBT_title="KI%5C%27Hub+Chat";
CHBT_titlecolor="FFFFFF";
CHBT_size="300x450";
CHBT_bgcolor="FFFFFF";
CHBT_textcolor="000000";
CHBT_textsize="12";
CHBT_nncolor="335599";
CHBT_cpcolor="335599";
CHBT_profanityfilter="1";
CHBT_position="inline";
</script>
<script type="text/javascript" src="https://www.chatbutton.com/c.js">
</script>

I tried to copy it into a tiddler, but that didn't render a chat box.

[Tobias Beer]

Hi KaSaDu,

Check out: http://chatbutton.tiddlyspot.com and
read up on SystemTags, esp: $:/tags/RawMarkup.

Anyhow, I think the latter would benefit from
a simple example like this one in the documentation.
Not sure if ChatButton should be the one in the demo, though.

Best wishes,

Tobias.

[Jed Carty]

As a quick explanation to go along with the example Tobias made, the reason the code you posted won't work is that the scripts won't be loaded if they are just in a normal tiddler. Putting them in a tiddler tagged with $:/tags/RawMarkup will put them in the head of the html file and load the scripts when the page loads.

[BJ]

Hi Tobias.

It looks to me like the script modifies the iframe element, and so must be entered in to the dom after the iframe (not in the head). So I think that your demo the iframe is running without being modified (maybe thats ok). The alternative would be to rap the html in script macros as in your example http://fiddle.tiddlyspot.com

all the best bj

[Tobias Beer]

Hi BJ,

 

It looks to me like the script modifies the iframe element, and so must be entered in to the dom after the iframe (not in the head). So I think that your demo the iframe is running without being modified (maybe thats ok). The alternative would be to rap the html in script macros as in your example http://fiddle.tiddlyspot.com

I guess you're right. I didn't actually verify wether the iframe would render properly without the js bits. I simply assumed the js was a prerequisite for it to work at all.

Now when I am just posting this into a new tiddler on TiddlyWiki.com:

<iframe name="CHATBUTTON_CHATBOX" id="CHATBUTTON_CHATBOX" src="https://www.chatbutton.com/chatroom/18383458/" width="300" height="450" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"><a href="https://www.chatbutton.com/chatroom/18383458/">Enter Chat Room</a></iframe> 

...I am wondering a bit what their javascript is actually supposed to be doing since the iframe appears to load just fine w/o it.

Best wishes,

Tobias.

[Riz]

I don't think the js script worked anytime. You have tagged it :/tags/RawMarkup - missing the $ sign

[Tobias Beer]

Hi Riz,

 

I don't think the js script worked anytime. You have tagged it :/tags/RawMarkup - missing the $ sign

:D

Best wishes,

Tobias. 

[kasaduen...@gmail.com]

I'm really thankful you guys are here.

Seriously, thank you. I'll check this out when I get home, later.

[kasaduen...@gmail.com]

Success!

Thank you so much!! :D

Do you folks mind if I put you on the site's "Acknowledgements" for helping me with this?

On Tuesday, December 27, 2016 at 2:59:08 AM UTC-8, kasaduen...@gmail.com wrote:

[kasaduen...@gmail.com]

Although, I still don't understand how to do that on my own. It looks like a lot of coding I'm not familiar with..

On Tuesday, December 27, 2016 at 2:59:08 AM UTC-8, kasaduen...@gmail.com wrote:

[kasaduen...@gmail.com]

I don't mind it but your demo will show live feed from my site, since the chat itself broadcasts from ChatButton's servers.

On Tuesday, December 27, 2016 at 2:59:08 AM UTC-8, kasaduen...@gmail.com wrote:

[kasaduen...@gmail.com]

Ran into another problem.

When I save the changes and refresh, it wants to load just the ChatButton.

As in, the entire TiddlyWiki GUI disappears, and all I see is the chat box.

I removed the tag for RawMarkup, which fixed the problem. If my site wasn't backed up, I would have just lost everything.

But even without the tag, the chat box still renders. So this is even more confusing. HaHa.