Xatframe: Difference between revisions

From xat wiki
No edit summary
(Marked this version for translation)
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<languages/>
<languages/>
{{toc}}
{{toc}}
<translate>
<translate><!--T:1--> To further customize the outer background of your group, you can provide a link to an HTML document that will be embedded via iframe (known as a "xatframe") behind your chat.</translate> <translate><!--T:2--> Within the embedded page, you can use any combination of HTML/CSS/JavaScript that you like including animations, generated content, etc. </translate>
To further customize the outer background of your group, you can provide a link to an HTML document that will be embedded via iframe (known as a "xatframe") behind your chat. Within the embedded page, you can use any combination of HTML/CSS/JavaScript that you like including animations, generated content, etc. </translate>
 
<translate><!--T:3--> This replaces the custom CSS styling that was used on Flash chats.</translate>
 
<translate>== Library == <!--T:4--></translate>
 
<translate><!--T:5--> The library provides a list of user-submitted xatframes that are free to use by the community.</translate>


<translate>This replaces the custom CSS styling that was used on Flash chats.</translate>
<translate>=== Submitting a xatframe === <!--T:15--></translate>


<translate>== Library ==</translate>
<translate><!--T:16--> You can [<tvar|link1>https://forum.xat.com/submissions/xatframe-submissions/?do=form</> submit a xatframe] so that it will appear on the [<tvar|link2>https://xat.com/chats#!library</> xatframe library] ([[<tvar|1>Special:MyLanguage/Forum</>|forum]] account required).</translate> <translate><!--T:17--> Your xatframe must follow the rules listed on the forum and below in order to be approved.</translate>  


<translate>The library provides a list of user-submitted xatframes that are free to use by the community.</translate>
<translate>=== Adding a xatframe to your group === <!--T:6--></translate>


<translate>=== Adding a xatframe to your group ===</translate>
<translate><!--T:8--> 1. Go to the [<tvar|link1>https://xat.com/chats#!library</> xatframe library]. '''(Figure 1)'''</translate>


[[File:Xatframes.png|thumb|<translate>'''Figure 1''': Adding a xatframe to your group</translate>]]
<translate><!--T:9--> 2. Click “copy” on any xatframe.  '''(Figure 2)'''</translate>


<translate>1. Go to the [<tvar|link1>https://xat.com/chats#!library</> xatframe library].</translate>
<translate><!--T:10--> 3. Then, hover over "group" at the top right of your group, click "customize" and enter your group password.</translate> <translate><!--T:11--> Alternatively, visit the [<tvar|link>https://xat.com/chats#!editgroup</> edit group] page.</translate>


<translate>2. Click “copy” on any xatframe. '''(Figure 1)'''</translate>
<translate><!--T:12--> 4. Add the URL to the "xatframe" field on the appearance tab. '''(Figure 3)'''</translate>


<translate>3. Then, hover over "group" at the top right of your group, click "customize" and enter your group password. Alternatively, visit the [<tvar|link2>https://xat.com/chats#!editgroup</> edit group] page.</translate>
<translate><!--T:13--> 5. Save changes and the xatframe will be live on your group.</translate>


<translate>4. Add the URL to the "xatframe" field on the appearance tab. '''(Figure 1)'''</translate>
<translate><!--T:14--> '''Note:''' You must also use an outer background when using a xatframe so that there is a fallback if users have xatframes disabled.</translate>


<translate>5. Save changes and the xatframe will be live on your group.</translate>
<gallery widths="215px">
File:Xatframe library.png|thumb|<translate><!--T:43--> '''Figure 1:''' xatframe library</translate>
File:Xatframe copy.png|thumb|<translate><!--T:44--> '''Figure 2:''' Copy a xatframe</translate>
File:Xatframe field.png|thumb|<translate><!--T:45--> '''Figure 3:''' xatframe field on the appearance tab</translate>
</gallery>


<translate>'''Note:''' You must also use an outer background when using a xatframe so that there is a fallback if users have xatframes disabled.</translate>
<translate>== Making your own xatframe == <!--T:18--></translate>


<translate>=== Submitting a xatframe ===</translate>
<translate><!--T:19--> If you want to create your own xatframe, you will first need to have somewhere to host it.</translate> <translate><!--T:20--> For this, we recommend you use '''<tvar|link>https://github.io</>''' as it is easy to set up and is already pre-unblocked.</translate> <translate><!--T:21--> If you wish to use your own domain, you will need to have it unblocked by making a [<tvar|link>https://xat.com/ticket</> ticket].</translate>


<translate>You can [<tvar|link3>https://forum.xat.com/submissions/xatframe-submissions/?do=form</> submit a xatframe] so that it will appear in the library ([[<tvar|1>Special:MyLanguage/Forum</>|forum]] account required). Your xatframe must follow the rules listed on the forum and below in order to be approved.</translate>  
<translate><!--T:22--> For more information on setting up GitHub pages, you can visit [<tvar|link>https://help.github.com/en/github/working-with-github-pages/creating-a-github-pages-site</> their website].</translate>


<translate>== Making your own xatframe ==</translate>
<translate><!--T:23--> Once you have a webpage set up, you can combine HTML/CSS/JavaScript code to create your design and then use it on your chat, or submit it to the xatframe library.</translate>


<translate>If you want to create your own embedded webpage, you will first need to have somewhere to host your webpage. For this, we recommend you use <tvar|link4>https://github.io</> as it is easy to set up and is already pre-unblocked. If you wish to use your own domain, you will need to have it unblocked by making a [<tvar|link5>https://xat.com/ticket</> ticket].</translate>
<translate>=== Clickable content === <!--T:46--> </translate>


<translate>For more information on setting up GitHub pages, you can visit [<tvar|link6>https://help.github.com/en/github/working-with-github-pages/creating-a-github-pages-site</> their website].</translate>
<translate><!--T:47--> While JavaScript events are disabled for the majority of the window, you are able to capture events starting from below the chat banner.</translate> <translate><!--T:48--> You can put things like navigation, buttons, etc. here to allow further customisation of your xatframe.</translate>


[[File:Xatframe settings.png|thumb|<translate>'''Figure 2''': xatframe setting options</translate>]]
<translate><!--T:49--> '''Note:''' If you have chat tabs enabled, you must minimise the navigation by clicking "close" to access the clickable area.</translate> <translate><!--T:50--> If there are no chat tabs, events will be enabled by default as there will be no navigation below the chat.</translate>


<translate>== Settings ==</translate>
<translate>== Settings == <!--T:24--></translate>
[[File:Xatframe settings.png|thumb|<translate><!--T:25--> '''Figure 4''': xatframe setting options</translate>]]


<translate>You can disable or enable xatframes through an automatic pop-up window or by hovering over "group" at the top right of a group and clicking "xatframe". You can do this for all groups (global), the current group or both. '''(Figure 2)'''</translate>
<translate><!--T:26--> You can disable or enable xatframes through an automatic pop-up window or by hovering over "group" at the top right of a group and clicking "xatframe".</translate> <translate><!--T:27--> You can do this for all groups (global), the current group or both. '''(Figure 4)'''</translate>


<translate>Changes will not take effect until you refresh the page.</translate>
<translate><!--T:28--> Changes will not take effect until you refresh the page.</translate>


<translate>== Rules ==</translate>
<translate>== Rules == <!--T:29--></translate>
<span id="rules"></span>
<span id="rules"></span>


<translate>You must ensure the xatframe you use complies with the rules below, even if taken from a third party.</translate>
<translate><!--T:30--> You must ensure the xatframe you use complies with the rules below, even if taken from a third party.</translate>


<translate>'''Note:''' xat reserves the right to change these rules without notice.</translate>
<translate><!--T:31--> '''Note:''' xat reserves the right to change these rules without notice.</translate>


<translate>'''IMPORTANT: Failure to follow these rules may result in your chat group being deleted or permanently delisted and having all of its media removed.</translate> <translate>xat may also apply a block to your account, depending on the offence.'''</translate>
<translate><!--T:32--> '''IMPORTANT: Failure to follow these rules may result in your chat group being deleted or permanently delisted and having all of its media removed.'''</translate> <translate><!--T:33--> '''xat may also apply a block to your account, depending on the offence.'''</translate>


<translate>
<translate>
<!--T:34-->
*Must be suitable for viewing by all ages.
*Must be suitable for viewing by all ages.


<!--T:35-->
*No IP trackers or content that can be used to track IP addresses.
*No IP trackers or content that can be used to track IP addresses.


<!--T:36-->
*Do not store any cookies etc. without permission.
*Do not store any cookies etc. without permission.


<!--T:37-->
*No chats to be embedded in an iframe.
*No chats to be embedded in an iframe.


<!--T:38-->
*Do not use animations that may be intrusive to the chatting experience.
*Do not use animations that may be intrusive to the chatting experience.


<!--T:39-->
*Flashing images should not be used.
*Flashing images should not be used.


<!--T:40-->
*Do not use malicious code of any kind (e.g. with mouse clicks or key presses).
*Do not use malicious code of any kind (e.g. with mouse clicks or key presses).


<!--T:41-->
*No commercial adverts or content of that nature.
*No commercial adverts or content of that nature.


<!--T:42-->
*Your background must comply with the xat [<tvar|1>https://xat.com/terms.html</> Terms of Service].
*Your background must comply with the xat [<tvar|1>https://xat.com/terms.html</> Terms of Service].
</translate>
</translate>

Revision as of 22:11, 3 October 2020

To further customize the outer background of your group, you can provide a link to an HTML document that will be embedded via iframe (known as a "xatframe") behind your chat. Within the embedded page, you can use any combination of HTML/CSS/JavaScript that you like including animations, generated content, etc.

This replaces the custom CSS styling that was used on Flash chats.

Library

The library provides a list of user-submitted xatframes that are free to use by the community.

Submitting a xatframe

You can submit a xatframe so that it will appear on the xatframe library (forum account required). Your xatframe must follow the rules listed on the forum and below in order to be approved.

Adding a xatframe to your group

1. Go to the xatframe library. (Figure 1)

2. Click “copy” on any xatframe. (Figure 2)

3. Then, hover over "group" at the top right of your group, click "customize" and enter your group password. Alternatively, visit the edit group page.

4. Add the URL to the "xatframe" field on the appearance tab. (Figure 3)

5. Save changes and the xatframe will be live on your group.

Note: You must also use an outer background when using a xatframe so that there is a fallback if users have xatframes disabled.

Making your own xatframe

If you want to create your own xatframe, you will first need to have somewhere to host it. For this, we recommend you use https://github.io as it is easy to set up and is already pre-unblocked. If you wish to use your own domain, you will need to have it unblocked by making a ticket.

For more information on setting up GitHub pages, you can visit their website.

Once you have a webpage set up, you can combine HTML/CSS/JavaScript code to create your design and then use it on your chat, or submit it to the xatframe library.

Clickable content

While JavaScript events are disabled for the majority of the window, you are able to capture events starting from below the chat banner. You can put things like navigation, buttons, etc. here to allow further customisation of your xatframe.

Note: If you have chat tabs enabled, you must minimise the navigation by clicking "close" to access the clickable area. If there are no chat tabs, events will be enabled by default as there will be no navigation below the chat.

Settings

Figure 4: xatframe setting options

You can disable or enable xatframes through an automatic pop-up window or by hovering over "group" at the top right of a group and clicking "xatframe". You can do this for all groups (global), the current group or both. (Figure 4)

Changes will not take effect until you refresh the page.

Rules

You must ensure the xatframe you use complies with the rules below, even if taken from a third party.

Note: xat reserves the right to change these rules without notice.

IMPORTANT: Failure to follow these rules may result in your chat group being deleted or permanently delisted and having all of its media removed. xat may also apply a block to your account, depending on the offence.

  • Must be suitable for viewing by all ages.
  • No IP trackers or content that can be used to track IP addresses.
  • Do not store any cookies etc. without permission.
  • No chats to be embedded in an iframe.
  • Do not use animations that may be intrusive to the chatting experience.
  • Flashing images should not be used.
  • Do not use malicious code of any kind (e.g. with mouse clicks or key presses).
  • No commercial adverts or content of that nature.