Product
Integration
Shopify
Learn More
Wordpress
Learn More
Custom Store
Learn More
Chatmyer In Custom Website
If you’re running a custom-coded website, adding Chatmyer is as simple as pasting a script into your main layout file. This guide walks you through integration for plain HTML, core PHP, and Laravel projects.
How to Add Chatmyer to a Custom Website
Step-by-Step Instructions:
Step 1: Copy the Chatmyer Widget Script
-
Log in to your Chatmyer Dashboard
-
From the left-hand menu, go to Widget Settings
-
Copy the script provided — make sure not to edit or change it
Step 2: Locate Your Main Layout File
When working with any type of website—whether it's a static HTML site, a PHP application, or a modern JavaScript single-page app—there is always a central file where the overall layout and structure of the site is defined. This file is often referred to as the main layout file.
Identifying this file is essential when you want to inject scripts, styles, meta tags, or shared UI components (like headers or footers). The location and name of this file depend on the technology stack your project is using.
Below is a guide to help you locate the main layout file based on your setup:
-
For plain HTML websites:
For simple static websites, the layout is usually defined in: index.html
This file is typically located in the root directory and contains the basic structure of your page: the<html>,<head>, and<body>tags. Any global scripts, stylesheets, or meta tags should be added here. -
For core PHP websites:
In traditional PHP setups (without a framework), you’ll likely find a file such as: index.php
This file usually serves as the entry point to your application. If your site uses includes or templates, you may also want to look for a file that handles layout structure (e.g.,
header.php,footer.php, orlayout.php).-
For Laravel projects:
Laravel uses Blade as its templating engine. The main layout file is typically found here: resources/views/layouts/app.blade.php.
This file defines the base HTML structure and commonly includes the
@yielddirective where page-specific content will be inserted. It's the best place to add shared styles, scripts, and layout components.Single Page Applications (React, Vue, etc.):
Modern JavaScript frameworks like React, Vue, or Angular use a single HTML file to serve the entire app. This file can be found at: public/index.html
This file contains a minimal HTML shell with a where your app mounts (e.g., for React or for Vue). It's the ideal spot to include global meta tags, favicons, and third-party scripts.
Custom Frameworks or Projects:
If you're working with a custom-built system or a lesser-known framework, look for the file that serves as the base view or layout. This is often the file that:
- Contains the global HTML structure
- Includes header and footer templates
- Injects content dynamically through includes, template engines, or render functions
Names to look out for might include
layout.html, layout.php, main.html, base.blade.php, shell.html, etc.
Pro Tip:
You're looking for the file that controls the site-wide layout — not just the content for a single page. If you're unsure, try searching for <head>, <body>, or keywords like "layout", "template", or "app" within your project files.
Step 3: Paste the Script into the Head Section
-
Open the main layout file in your code editor
-
Locate the head section of the HTML structure
-
Paste the Chatmyer script just before the closing of the head section
-
Save the file
✅ That’s It!
The Chatmyer widget will now load automatically on your website. You can return to your Chatmyer Dashboard at any time to customize its appearance, behavior, and messaging.
Similar Topics
Mon, 21 Jul 2025
Integrate Chatmyer with Your Shopify Store
Learn how to seamlessly integrate Chatmyer with your Shopify store by adding a simple script to your theme’s <head> section. This article walks you through each step inside your Shopify admin to get your live chat widget up and running instantly.
Mon, 21 Jul 2025
Add Chatmyer to a WordPress Website
Chatmyer can be added to any WordPress website by inserting a script into your site’s header. Whether you prefer using a plugin or editing theme files directly, this guide covers both methods to help you get started in minutes.
Tue, 15 Jul 2025
How to Set Up Custom Page Monitoring in Chatmyer
With Chatmyer’s Custom Page Monitoring feature, you can track specific high-value pages like pricing, checkout, or landing pages — so your team sees the right sessions, not all sessions.
Browser
Android
Ios
Windows
Mac