Skip to main content

Embedding Chat in Wix

Wix pages are built by dragging elements onto a canvas, and one of those elements exists to hold HTML you have written yourself. Dead Simple Chat's embed code goes into that element.

About the Wix half of this page

Wix is somebody else's product and its editor is redesigned regularly — the Wix Editor, Wix Studio and the older Editor X do not all name things the same way. The steps below describe the current Wix Editor. If a panel has been renamed, what you are looking for is the element that embeds custom HTML code, and any route to one will do. Wix's own help centre is the authority on their interface. The Dead Simple Chat half — which snippet to paste, and what it must not be changed into — is exact.

Before you start: get the code​

Open the Dead Simple Chat dashboard, go to Chat Rooms, click your room, and open the Embed Info tab. Choose Embed Chat Frame and an Embed Size, and the Embed Code box gives you a single tag:

HTML
<iframe src="https://deadsimplechat.com/YOUR_ROOM_ID" width="100%" height="600px"></iframe>

Keep that to hand. Embedding Chat on Your Website explains the sizes and the bubble alternative.

Adding the chat to a page​

  1. Open your site in the Wix Editor and go to the page that should have the chat.
  2. In the left sidebar, click Add Elements (the + button).
  3. Choose Embed Code.
  4. Pick the option for embedding a widget — the one described as HTML code or an HTML iframe, rather than the one that embeds a whole site by its address. Click it, or drag it onto the page.
  5. A placeholder box lands on the canvas with an Enter Code button on it. Click that.
  6. Paste the <iframe> code into the box and choose Update (or Apply).
  7. Drag the box to where you want it and drag its handles to the size you want.
  8. Publish the site, then open the published page and check the chat there.

Step 7 is the one people miss. Wix puts your code inside a frame of its own, and that frame is sized by the box on the canvas, not by your code. A height="600px" inside a 200 px tall Wix box gives you 200 px of chat with the rest cut off.

The tidy way to handle that is to let your code fill whatever box Wix gives it, and then do all the sizing by dragging:

HTML
<iframe src="https://deadsimplechat.com/YOUR_ROOM_ID"
        style="width: 100%; height: 100%; border: 0;"></iframe>

That snippet is the dashboard's src with the fixed width and height swapped for ones that follow the container. Everything that identifies your room — the address and the Room ID — is unchanged.

Embedding by address instead​

Wix also offers an element that embeds another site by its address rather than by HTML. Given the chat room's address it will do the same job:

Chat room address
https://deadsimplechat.com/YOUR_ROOM_ID

It is fewer steps, and it takes the same query parameters, so you can sign people in with ?accessToken=... exactly as you would on the src of an iframe. Use whichever of the two Wix gives you a better experience of.

Making it work on phones​

Wix keeps a separate mobile layout, and a box you have sized on the desktop canvas will have been given a default size on the mobile one. Switch to the mobile view in the editor and check the chat box there before publishing — resize it to something that fills the screen width.

A full chat room in a narrow column is cramped whatever you do with the box, so trim the room as well: Collapse Sidebar keeps channels and the online users list reachable from a menu instead of giving them a column of their own. See the Hide Elements Reference.

The chat bubble on a Wix site​

The chat bubble is a pair of <script> tags that pins a chat button to the corner of the browser window. It only behaves that way if it runs as part of your page.

It will not do that inside an HTML embed element. Wix renders the code you paste into that element inside a frame of its own, and a corner-pinned bubble pins itself to the corner of that frame — so you get a bubble trapped in a box in the middle of the page, which is not what a bubble is for.

To get a real site-wide bubble, put the snippet in Wix's custom-code feature, which injects code into the pages themselves. In the Wix dashboard, that is under Settings → Custom Code: add a new code snippet, paste both tags, apply it to All pages, and place it at the end of the body.

HTML
<script src="https://deadsimplechat.com/js/embed.js" type="text/javascript"></script>
<script>
    window.DeadSimpleChat.initBubble({
        location: "https://deadsimplechat.com",
        size: "small",
        roomId: "YOUR_ROOM_ID",
        open: "false"
    })
</script>

The end of the body matters: the snippet draws the bubble into the page when it runs, so it needs a page body to draw into.

info

Custom code is a paid Wix feature and needs a domain connected to the site. If the Custom Code page tells you to upgrade, that is Wix's requirement, not ours — and the chat frame above is a complete alternative that works on any Wix plan.

Signing your visitors in automatically​

By default a visitor meets the room's join screen and introduces themselves there. If your site already knows who they are, put the credential on the end of the address:

HTML
<iframe src="https://deadsimplechat.com/YOUR_ROOM_ID?accessToken=ACCESS_TOKEN_FOR_THIS_PERSON"
        style="width: 100%; height: 100%; border: 0;"></iframe>

An access token identifies one person, so it has to be generated per visitor rather than typed into the editor once. That means generating it from code — with Wix, through their own backend code feature — and it is the same job described in SSO Using Auth Token.

If that is more than you need, leave the join screen in place and decide what it asks for instead: Configuring the Join Screen.

If something does not look right​

The box shows your code as text, or shows nothing. It went into a text element rather than an HTML embed element. Delete it and add the embed element from Add Elements → Embed Code.

The chat is cut off. The Wix box is smaller than the chat inside it. Use the 100% snippet above and resize the box.

The chat looks right in the editor and wrong on the live site. Always judge it on the published page. The editor canvas is an approximation.

The chat is fine on desktop and cramped on mobile. Check the mobile layout separately, as above.

A bubble appears inside a box instead of in the corner. It is in an HTML embed element. Move it to Settings → Custom Code.