> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chatsyncs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# How to Add ChatSyncs Chat Widget to WordPress

> How to paste the ChatSyncs Chat Widget's embed code into a WordPress site, so the WhatsApp chat button appears on your pages.

Adding the ChatSyncs Chat Widget to WordPress uses the same **JavaScript Embed Code** as any
other website — just pasted in through WordPress instead of directly editing HTML.

<Frame>
  <img src="https://mintcdn.com/chatsyncs/sOr8zsZPH59fQo2F/images/learn/whatsapp-chat-widget/step-05-embed-code-modal.png?fit=max&auto=format&n=sOr8zsZPH59fQo2F&q=85&s=d247d7b0a41b06cd9850ef81a094ff7e" alt="Chat Widget embed code modal with the JavaScript snippet to copy" width="1261" height="585" data-path="images/learn/whatsapp-chat-widget/step-05-embed-code-modal.png" />
</Frame>

<Steps>
  <Step title="Build and get your widget's embed code">
    Follow [Chat Widget](/learn/chatsyncs-automation/chat-widget-in-chatsyncs) to create the widget and copy its
    **JavaScript Embed Code**.
  </Step>

  <Step title="Open WordPress and add the code">
    Pick whichever fits your site:

    * **Theme editor** — Appearance → Theme File Editor → `header.php`, paste the code just
      before `</head>`. Best if you're comfortable editing theme files, since a typo can break
      the page.
    * **A header/footer plugin** — install a plugin like *Insert Headers and Footers*, paste the
      code into its header field, and save. Safer than editing theme files directly.
    * **A Custom HTML block** — in the block editor (Gutenberg), add a **Custom HTML** block to
      the page or template and paste the code in. Simplest if you only want the widget on one
      page.
  </Step>

  <Step title="Save and check your site">
    Reload the page and confirm the floating WhatsApp button appears.
  </Step>
</Steps>

<Tip>
  If you're not comfortable editing theme files, a header/footer plugin is the safest option —
  it avoids touching your theme's code directly, so a typo can't take your site down.
</Tip>

## Frequently asked

<AccordionGroup>
  <Accordion title="Where do I get the embed code to paste into WordPress?">
    Build the widget first — see [Chat Widget](/learn/chatsyncs-automation/chat-widget-in-chatsyncs) for creating it and
    opening its **Embed Code** dialog.
  </Accordion>

  <Accordion title="I don't want to edit my theme files — is there a safer way?">
    Yes — use a header/footer plugin (e.g. *Insert Headers and Footers*) or a **Custom HTML**
    block instead of editing `header.php` directly.
  </Accordion>

  <Accordion title="Can I show the widget on just one page instead of the whole site?">
    Yes — add the embed code as a **Custom HTML** block on that specific page or template,
    instead of pasting it site-wide in the header.
  </Accordion>
</AccordionGroup>