Connect CETECommand to your website.

Use the CETECommand plugin. No code to paste, and it keeps working when you change themes.

1. Download the plugin

   Download the plugin (.zip)

   Keep it as a .zip file. WordPress wants it that way.

2. Upload it to WordPress

   In your WordPress dashboard: Plugins›Add New Plugin›Upload Plugin. Choose cetecommand.zip, press Install Now, then Activate.

3. Add your booking key

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

   Then in WordPress go to Settings›CETECommand. Paste your booking key (the data-key from Website code) into Booking key. Tick Website chat for a chat button on every page, then press Save Changes. Leave CETECommand address as it is.

4. Put the form on a page

   Edit your Contact page, add a Shortcode block and paste this:

   Enquiry formCopy

   [cete_enquiry_form]

   OptionsCopy

   [cete_enquiry_form type="work_order"]
   [cete_enquiry_form type="quote" service="Roofing" title="Get a quote"]

5. Add a chat button and client login

   Optional. Use these anywhere: a page, a sidebar or the footer.

   Chat button and client loginCopy

   [cete_chat_button label="Chat with us"]
   [cete_client_login label="Client login"]

6. Already have a contact form?

   Contact Form 7, WPForms and Elementor Pro forms can send their entries to CETECommand too. In Settings›CETECommand, paste an API key (in CETECommand: Jobs›Settings›API and webhooks, Make a key) into API key. Tick your form plugin under Send entries from, pick quote or maintenance requests under Send them as, and press Save Changes. Test the API key checks it works. The key stays on your server.

Rather not use a plugin? Paste the one-line script from Any other website into your theme footer (or a header and footer code plugin), and use a Custom HTML block for the form.

The same CETECommand plugin, with a WooCommerce section for your shop.

1. Install the plugin

   Download the plugin (.zip)

   Plugins›Add New Plugin›Upload Plugin, choose cetecommand.zip, Install Now, Activate.

2. Add your booking key

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

   In WordPress: Settings›CETECommand. Paste your booking key into Booking key and press Save Changes.

3. Turn on the shop extras

   On the same page, the WooCommerce section shows when WooCommerce is active. Everything in it is off until you tick it. Choose what you want, then Save Changes:

   • Chat on shop pages. The chat button on Product pages, the Cart and Checkout only. Customers ask before they buy, and you answer from the app. (Turn on Website chat in CETECommand too.)
   • Product questions. A "Questions about this product?" link under Add to cart that opens the chat. If chat is off, it opens your booking page.
   • Quote request button. On every product, or Only on products with no price. For things you price per job: it opens your enquiry form with the product filled in, and the request lands in Jobs, Enquiries.
   • My Account. A "Your jobs and invoices" link to your client portal. It shows while Client portal is on in CETECommand.

4. Send orders into CETECommand

   In CETECommand: Invoicing›Settings›Shop orders. Press Turn on shop orders and copy the address (it is shown once).

   In WordPress, under WooCommerce orders into CETECommand on the same plugin page, paste it into Shop orders address and press Connect. The plugin adds the WooCommerce webhooks for you (Order created and Order updated) and sends a test. Each order then becomes an invoice in Invoicing, and paid orders are marked paid.

   Keep the address secret: anyone with it can make invoices. Shop orders are on paid plans and in your free months.

5. Shortcodes for your own layout

   The shortcodes from the WordPress steps work here too: [cete_enquiry_form], [cete_chat_button] and [cete_client_login]. On a product page you can also place the quote button and questions link yourself:

   Product page shortcodesCopy

   [cete_quote_button label="Ask for a quote"]
   [cete_product_question label="Questions about this product?"]

No plugin? Make the webhook yourself: WooCommerce›Settings›Advanced›Webhooks›Add webhook. Status Active, Topic Order created, the shop orders address as the Delivery URL. Add a second one for Order updated to catch payments later. Use the plugin or your own webhooks, not both, so each order comes in once.

Paste the script into your theme once, then add the form with a Custom Liquid section.

1. List your shop

   In CETECommand: Jobs›Settings›Booking page. Under Your websites add your own domain and your your-shop.myshopify.com address. Save.

2. Open the code editor

   In Shopify admin: Online Store›Themes. Next to your current theme press the ... button, then Edit code.

3. Add the script

   Open layout/theme.liquid. Find </body> near the bottom and paste this just above it. Save.

   theme.liquid, before </body>Copy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

   Leave out data-chat if you do not want the chat button.

4. Add the form

   Back in Online Store›Themes, press Customize. Open your Contact page, then Add section, Custom Liquid. Paste this and save.

   Custom Liquid sectionCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

5. Add a client login link

   Optional. Online Store›Navigation›Main menu, Add menu item. Name it Client login and use this link:

   Client login linkCopy

   https://app.cetechat.com/p/YOUR_BOOKING_KEY

The form shows on your live shop. The theme editor preview runs on a Shopify address, so it may show a blank space there.

Add the form with Embed a Site, and the chat with Custom code.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Under Your websites add your Wix address (for example yourname.wixsite.com) and your own domain if you have one connected. Save. The form and chat only show on the websites you list.

2. Add the form

   In the Wix Editor: Add Elements (+), Embed Code, Embed a Site. Paste this address and press Apply:

   Website addressCopy

   https://app.cetechat.com/e/YOUR_BOOKING_KEY/embed

   Drag the box tall enough for the form, about 900 pixels (more with photos). Wix keeps embeds at a fixed height.

   For maintenance requests only, add ?type=work_order to the end. For quotes only, ?type=quote. Use Embed a Site, not Embed HTML: Wix runs pasted HTML from a different address, so the form would not show.

3. Chat on every page

   In your Wix dashboard: Settings›Custom code (under Advanced). Press + Add Custom Code and paste this. Choose All pages, Load code once, place it in Body - end, then Apply.

   Custom code, Body - endCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

   Custom code needs a Wix Premium plan with your own domain connected. Make sure that domain is under Your websites.

4. Add a client login button

   Optional. Add a Button, then Link, Web address, and paste:

   Client login linkCopy

   https://app.cetechat.com/p/YOUR_BOOKING_KEY

5. Publish

   Press Publish. The form and chat show on your published site, not in the Editor or its preview (those run on a Wix address you have not listed).

Add the script with Code Injection, and the form with a Code block.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Add the script

   In Squarespace: Website›Pages›Custom Code›Code Injection (on older sites: Settings›Advanced›Code Injection). Paste this into Footer and save.

   Code Injection, FooterCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

   Code Injection and Code blocks with scripts need a Core plan or higher (Business on older plans).

3. Add the form

   Edit your Contact page, press Add Block, choose Code and paste this. Turn off Display Source, then save.

   Code blockCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

4. Add a client login

   Optional. Another Code block with this, or a button linking to https://app.cetechat.com/p/YOUR_BOOKING_KEY.

   Client loginCopy

   <div data-cete="client-login"></div>

Add the script in your project settings, and the form with an Embed element.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

   Add your webflow.io address too if you want to test on it.

2. Add the script

   In Webflow: Site settings›Custom code. Paste this into Footer code and save.

   Footer codeCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

   Custom code needs a paid Webflow site plan.

3. Add the form

   In the Designer, open the Add panel, drag a Code Embed element onto your page, paste this and save.

   Code EmbedCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

4. Publish

   Press Publish. Scripts do not run in the Designer, so check the form on your published site.

Two lines: the script once on every page, and a div where the form goes.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Add the script to every page

   Paste it just before </body>, or in <head>. It loads after the page, so it does not slow it down.

   Every pageCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

3. Put the form where you want it

   Enquiry formCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

   Pick a service, change the headingCopy

   <div data-cete="enquiry-form" data-service="Roofing" data-title="Get a roof quote"></div>

4. Your own chat button and client login

   Optional. The chat button sits in the corner by itself. To open it from your own button as well:

   Chat and client loginCopy

   <button type="button" id="chat-with-us">Chat with us</button>
   <script>
     document.getElementById('chat-with-us').addEventListener('click', function () {
       if (window.CETE) window.CETE.openChat();
     });
   </script>
   
   <!-- A "Client login" link to your client portal -->
   <div data-cete="client-login" data-label="Client login"></div>

5. Know when a form is sent

   Optional, for analytics. The form element fires a cete:submitted event.

   Form sent eventCopy

   <script>
     document.addEventListener('cete:submitted', function (e) {
       console.log('Enquiry sent:', e.detail.kind);
     });
   </script>

Load the script once, then drop the form div into any component. It finds forms added later by React.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

   Add localhost:3000 (or your dev port) while you build.

2. Next.js: load the script in your root layout

   app/layout.tsxCopy

   import Script from 'next/script';
   
   export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
       <html lang="en-AU">
         <body>
           {children}
           <Script
             src="https://app.cetechat.com/w/v1.js"
             data-key="YOUR_BOOKING_KEY"
             data-chat=""
             strategy="afterInteractive"
           />
         </body>
       </html>
     );
   }

   Vite or Create React App: paste the plain script tag into index.html instead.

3. Put the form in a component

   Contact.tsxCopy

   export default function Contact() {
     return (
       <section>
         <h1>Get a quote</h1>
         <div data-cete="enquiry-form" data-type="quote" data-service="Roofing" />
         <div data-cete="client-login" />
       </section>
     );
   }

4. Open the chat from your own button

   ChatButton.tsxCopy

   declare global { interface Window { CETE?: { openChat: () => void } } }
   
   export function ChatButton() {
     return <button type="button" onClick={() => window.CETE?.openChat()}>Chat with us</button>;
   }

   Want a typed component? See <EnquiryForm /> in the Node.js package.

Load the script once in your app head, then use the form div in any template.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

   Add localhost:5173 (or your dev port) while you build.

2. Nuxt: add the script to the app head

   nuxt.config.tsCopy

   export default defineNuxtConfig({
     app: {
       head: {
         script: [
           { src: 'https://app.cetechat.com/w/v1.js', 'data-key': 'YOUR_BOOKING_KEY', 'data-chat': '', async: true },
         ],
       },
     },
   });

   Plain Vue with Vite: paste the script tag into index.html.

3. Put the form in a template

   pages/contact.vueCopy

   <template>
     <section>
       <h1>Get a quote</h1>
       <div data-cete="enquiry-form" data-type="quote"></div>
       <div data-cete="client-login"></div>
     </section>
   </template>

   The script watches the page, so forms on pages opened later by the router show too.

Add the script to your layout. For your own forms, send enquiries from the server with the API.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Laravel: add the script to your layout

   resources/views/layouts/app.blade.phpCopy

       {{-- before </body> --}}
       <script src="https://app.cetechat.com/w/v1.js" data-key="{{ config('services.cete.booking_key') }}" data-chat async></script>
   </body>

   .envCopy

   CETE_BOOKING_KEY=YOUR_BOOKING_KEY

   config/services.phpCopy

   'cete' => [
       'booking_key' => env('CETE_BOOKING_KEY'),
   ],

   Plain PHP: paste the script tag into your shared footer file, such as footer.php. With our PHP package (below) in a Laravel app, @cetecommandScript and @cetecommandEnquiryForm do the same from CETECOMMAND_BOOKING_KEY.

3. Put the form in a view

   resources/views/contact.blade.phpCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

4. Keep your own form?

   Send its entries to CETECommand from your controller. See PHP and Laravel below.

Express, Fastify or any Node site: the script goes in your page template. Your server can talk to the API too.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Add the script to your layout template

   In EJS, Handlebars, Pug or plain HTML, before </body>:

   views/layout.ejsCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

3. Put the form on a page

   views/contact.ejsCopy

   <div data-cete="enquiry-form"></div>

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

4. Send enquiries from your own form

   Use the API from your server. See Node.js below.

Django, Flask or FastAPI: add the script to your base template.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Add the script to your base template

   templates/base.htmlCopy

       {# before </body> #}
       <script src="https://app.cetechat.com/w/v1.js" data-key="{{ cete_booking_key }}" data-chat async></script>
   </body>

   Pass cete_booking_key from your settings, or paste the key in. It is public, so that is fine.

3. Put the form on a page

   templates/contact.htmlCopy

   {% extends "base.html" %}
   {% block content %}
     <div data-cete="enquiry-form"></div>
   {% endblock %}

   Only quotes: add data-type="quote". Only maintenance requests: data-type="work_order". Leave it out and customers choose (when maintenance requests are on).

4. Send enquiries from your own form

   A few lines with requests. See Python below.

Joomla, Drupal, GoDaddy, Weebly, Framer, Carrd, Duda and more. If you can paste code, it works.

1. List your site

   In CETECommand: Jobs›Settings›Booking page. Add your website address under Your websites and save. The form and chat only show on the websites you list.

2. Find the code spot

   Most website builders call it Custom code, Code injection, Header and footer scripts or Tracking code. Paste the script there so it is on every page.

   Every pageCopy

   <script src="https://app.cetechat.com/w/v1.js" data-key="YOUR_BOOKING_KEY" data-chat async></script>

   Leave out data-chat if you do not want the chat button.

3. Add the form

   Use an HTML, Embed or Code block where you want the form, and paste one of these:

   Quote or maintenance (they choose)Copy

   <div data-cete="enquiry-form"></div>

   Quotes onlyCopy

   <div data-cete="enquiry-form" data-type="quote"></div>

   Maintenance requests onlyCopy

   <div data-cete="enquiry-form" data-type="work_order"></div>

4. Add a client login

   Client loginCopy

   <div data-cete="client-login"></div>

   Or link a menu item or button straight to https://app.cetechat.com/p/YOUR_BOOKING_KEY.

5. Builder runs embeds in a frame?

   Some builders run pasted code from an address of their own, so the form does not show. If yours does, or it only takes a web address, embed the form page itself with its "embed a website" element. Your website address must still be under Your websites.

   Form addressCopy

   https://app.cetechat.com/e/YOUR_BOOKING_KEY/embed

No website at all? Share your booking page: https://app.cetechat.com/e/YOUR_BOOKING_KEY. Put it on Google, Facebook and your email signature.