Skip to main content

Embedding Chat in WordPress

Putting a Dead Simple Chat room into a WordPress page means pasting the room's embed code into a block that passes HTML through untouched. In the WordPress block editor that block is called Custom HTML.

About the WordPress half of this page

WordPress is somebody else's product and its editor changes between releases. The names below are what WordPress calls things at the time of writing; if a menu has moved, you are looking for the block that accepts raw HTML, and any route to one will do. WordPress's own documentation 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>

That is the code this page refers to throughout. Embedding Chat on Your Website explains the sizes and the bubble alternative.

Adding the chat to a post or page​

  1. Open the post or page in the WordPress editor.
  2. Click the + button to add a block, wherever you want the chat to sit.
  3. Search for Custom HTML and insert it. It is in the Widgets category — the search box is faster than hunting for it.
  4. Paste the <iframe> code into the block. Paste it exactly as the dashboard gave it to you; do not retype the quotes.
  5. Click Preview on the block to see the chat render in place, or HTML to go back to the code.
  6. Update or Publish the post.

Then open the published page in a normal browser tab and check it there too. The editor preview and the live page are not always the same, because your theme's stylesheet applies to one and not the other.

Getting the width right​

Large gives you width="100%", which means the full width of whatever WordPress puts the block inside — usually your theme's content column, not the window. That is normally what you want.

If you want the chat wider than the text around it, use WordPress's own block alignment rather than changing the number: select the block and choose Wide width or Full width from the block toolbar. Those settings are the theme's business, so a theme that does not support them will ignore them.

To set a height that responds to the screen instead of a fixed 600 px, replace the attributes with a style:

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

The classic editor​

If your site uses the classic editor — either because it is an older install or because the Classic Editor plugin is active — the equivalent is the Text tab.

  1. Open the post for editing.
  2. Above the editing area, switch from Visual to Text. This matters: the Visual tab escapes what you paste and you will end up with the code printed on the page as words.
  3. Paste the <iframe> code where you want the chat.
  4. Update the post.

Switching back to Visual after pasting is safe to look at but risky to edit in — the visual editor can rewrite markup it does not recognise. If you need to change the chat later, change it on the Text tab.

Putting the chat on every page​

A single post gets a Custom HTML block. A chat that should appear across the whole site needs to live in a site-wide slot instead. Depending on your WordPress version and theme, that is one of:

  • A Custom HTML widget in a sidebar or footer widget area, under Appearance → Widgets.
  • A block in a template, under Appearance → Editor on a block theme.
  • Your theme's footer template, on a classic theme — edit a child theme, never the theme itself, or a theme update will wipe the change.

This is also where the chat bubble belongs. The bubble is a pair of <script> tags that draws a chat button into the corner of the page, and it wants to be at the end of the page body on every page rather than in the middle of one post:

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>
caution
WordPress and <script> tags

WordPress does not let every account publish <script> in post content. Only users with the unfiltered-HTML capability — administrators on a standard single-site install, super admins on a multisite network — keep script tags through a save. For everybody else WordPress strips them silently, and you get a page with no bubble and no error message.

The <iframe> chat frame is not affected by this on a standard install. If you are working in an account without that capability, use the chat frame, or ask an administrator to add the bubble to the site template for you.

Hosted WordPress.com sites have their own rules about custom HTML and JavaScript that differ by plan; check what your site allows before planning around the bubble.

Signing your WordPress users into the chat automatically​

If people are already logged in to your WordPress site, you can carry that identity into the chat so they are not asked to introduce themselves twice. That is a separate job with its own walkthrough: SSO in WordPress.

The short version is that the credential rides on the src of the frame:

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

Which credential to use depends on the room's permission level.

If something does not look right​

The code shows up on the page as text. It went into a paragraph rather than into raw HTML. In the block editor, replace it with a Custom HTML block; in the classic editor, paste on the Text tab, not Visual.

The code vanishes when you save. Something stripped it — usually the unfiltered-HTML rule above for <script>, or a security plugin. Check which account you are posting as.

The chat is squeezed into a narrow column. That is your theme's content width, not the chat. Use the block's Wide width or Full width alignment, or put the chat in a full-width template.

The chat is fine on a desktop and cramped on a phone. Narrow it down: hide the sidebar and other chrome for the embed. Hide Elements Reference covers the toggles, and Collapse Sidebar in particular is made for this.