Fbchat: Difference between revisions

From xat wiki
No edit summary
Tag: ER: Stif
(9 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<div style="float:right; margin: 0 0 0 65px">__TOC__</div>
<languages />{{toc}}
{{DISPLAYTITLE: Embed xat on your Facebook page}}
{{DISPLAYTITLE:<translate><!--T:1--> Embed xat on your Facebook page</translate>}}<translate>
<!--T:2-->
You can embed a xat chat on your community or business Facebook page using the steps below.
You can embed a xat chat on your community or business Facebook page using the steps below.


== Installing the app and adding a tab ==
<!--T:3-->
'''Note:''' This feature will not work on a Facebook page with less than 2,000 likes due to Facebook's requirements for adding custom tabs.


<div style="margin-left: 20px;">
===Installing the app and adding a tab === <!--T:4-->
 
<!--T:5-->
1. Log in to your community or business Facebook account.
1. Log in to your community or business Facebook account.


2. Install the Facebook app '''Static HTML''' from the following link: https://apps.facebook.com/static_html_plus/
<!--T:6-->
<div style="margin-left: 13px;">
2. Install the Facebook app '''Static HTML''' from the following link: <tvar|1>https://apps.facebook.com/static_html_plus/</>. ('''Figure 1''')
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/1/12/Static-html5.png|description=Installing the Static HTML app.}}
</div>


3. On the next window, select your Facebook page and click on "Add Page Tab".
<!--T:7-->
<div style="margin-left: 13px;">
3. On the next window, select your Facebook page and click on "Add Page Tab". ('''Figure 2''')
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/7/72/Add-page-tab.png|description=The 'Add Page Tab' screen.}}
</div>


4. On the next page, click on "Set up tab".
<!--T:8-->
<div style="margin-left: 13px;">
4. On the next page, click on "Set up tab". ('''Figure 3''')
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/3/31/Set-up-tab.png|description=The 'Set up tab' button.}}
</div>


5. On the set up page, add the embed code for the xat chat into the index.html field.
<!--T:9-->
<div style="margin-left: 13px;">
5. On the set up page, add the embed code for the xat chat into the index.html field. ('''Figure 4''')
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/d/d3/Add-embed-code.png|description=Adding the chat's embed code into the box.}}
</div>


6. Click on the blue "Save & Publish" button at the top right.
<!--T:10-->
6. Click on the blue "Save & Publish" button at the top right and the xat chat will be added to your Facebook page. ('''Figure 5''')</translate>


7. Done! The xat chat is now added to your Facebook page.
<gallery mode="packed" heights=85px>
<div style="margin-left: 13px;">
File:Static-html5.png|none|<translate><!--T:11--> '''Figure 1:''' Installing the Static HTML app.</translate>
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/b/bf/Tab-added.png|description=The xat chat embedded on Facebook.}}
File:Add-page-tab.png|none|<translate><!--T:12--> '''Figure 2:''' The 'Add Page Tab' screen.</translate>
</div>
File:Set-up-tab.png|none|<translate><!--T:13--> '''Figure 3:''' The 'Set up tab' button.</translate>
</div>
File:Add-embed-code.png|none|<translate><!--T:14--> '''Figure 4:''' Adding the chat's embed code into the box.</translate>
File:Tab-added.png|none|<translate><!--T:15--> '''Figure 5:''' The xat chat embedded on Facebook.</translate>
</gallery><translate>


== Change the tab name and order ==
=== Change the tab name and order === <!--T:16-->


<div style="margin-left: 20px;">
<!--T:17-->
1. Click on "Settings" at the top right of your Facebook page .
1. Click on "Settings" at the top right of your Facebook page.


<!--T:18-->
2. Go to the tab "Templates and tabs".
2. Go to the tab "Templates and tabs".


<!--T:19-->
3. At the bottom, find the "Welcome" tab and click on the "Settings" button next to it.
3. At the bottom, find the "Welcome" tab and click on the "Settings" button next to it.


4. On the pop-up window, add a custom tab name such as "xat Chat", then click on "Save" and "OK".
<!--T:20-->
<div style="margin-left: 13px;">
4. On the pop-up window, add a custom tab name such as "xat Chat", then click on "Save" and "OK". ('''Figure 6''')
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/d/d5/Change-tab-name.png|description=Changing the name of the tab.}}
 
</div>
<!--T:21-->
5. Lastly, to change the order of the tab, simply click on the tab field and drop it higher or lower on the tabs list. ('''Figure 7''')


5. Lastly, to change the order of the tab, simply click on the tab field and drop it higher or lower on the tabs list.
<!--T:22-->
<div style="margin-left: 13px;">
6. Done! The tab is now renamed and reordered on your Facebook page. ('''Figure 8''')</translate>
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/7/78/Change-tab-position.png|description=Changing the order of the tab.}}
</div>


6. Done! The tab is now renamed and reordered on your Facebook page.
<gallery mode="packed" heights=150px>
<div style="margin-left: 13px;">
File:Change-tab-name.png|thumb|<translate><!--T:23--> '''Figure 6:''' Changing the name of the tab.</translate>
{{Img|inline=yes|width=200|image=https://util.xat.com/wiki/images/0/03/Tab-complete.png|description=The tab now renamed and reordered.}}
File:Change-tab-position.png|thumb|<translate><!--T:24--> '''Figure 7:''' Changing the order of the tab.</translate>
</div>
File:Tab-complete.png|thumb|<translate><!--T:25--> '''Figure 8:''' The tab now renamed and reordered.</translate>
</div>
</gallery>

Revision as of 00:27, 4 June 2020

You can embed a xat chat on your community or business Facebook page using the steps below.

Note: This feature will not work on a Facebook page with less than 2,000 likes due to Facebook's requirements for adding custom tabs.

Installing the app and adding a tab

1. Log in to your community or business Facebook account.

2. Install the Facebook app Static HTML from the following link: https://apps.facebook.com/static_html_plus/. (Figure 1)

3. On the next window, select your Facebook page and click on "Add Page Tab". (Figure 2)

4. On the next page, click on "Set up tab". (Figure 3)

5. On the set up page, add the embed code for the xat chat into the index.html field. (Figure 4)

6. Click on the blue "Save & Publish" button at the top right and the xat chat will be added to your Facebook page. (Figure 5)

Change the tab name and order

1. Click on "Settings" at the top right of your Facebook page.

2. Go to the tab "Templates and tabs".

3. At the bottom, find the "Welcome" tab and click on the "Settings" button next to it.

4. On the pop-up window, add a custom tab name such as "xat Chat", then click on "Save" and "OK". (Figure 6)

5. Lastly, to change the order of the tab, simply click on the tab field and drop it higher or lower on the tabs list. (Figure 7)

6. Done! The tab is now renamed and reordered on your Facebook page. (Figure 8)