diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/chat_icon.svg b/x-pack/plugins/cloud_integrations/cloud_chat/public/chat_icon.svg
index 5a16e8960aa9f..5bac78a5e78ef 100644
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/chat_icon.svg
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/chat_icon.svg
@@ -1,6 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
-  <path
-    fill="#FFFFFF"
-    d="M4.583 14.894l-3.256 3.78c-.7.813-1.26.598-1.25-.46a10689.413 10689.413 0 0 1 .035-4.775V4.816a3.89 3.89 0 0 1 3.88-3.89h12.064a3.885 3.885 0 0 1 3.882 3.89v6.185a3.89 3.89 0 0 1-3.882 3.89H4.583z"
-  />
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.96672 8.8637C5.29876 9.6512 6.05226 10.2009 6.92862 10.2009H10.6021L13.3572 13V10.2009C14.5407 10.2009 15.5001 9.1984 15.5001 7.9617V4.60283C15.5001 3.36613 14.5407 2.36359 13.3572 2.36359H12.2858V6.69704C12.2858 7.89366 11.3903 8.8637 10.2858 8.8637H4.96672Z" fill="white"/>
+  <path d="M4.90517 6.71774H9.07143C9.66316 6.71774 10.1429 6.21646 10.1429 5.59811V2.23925C10.1429 1.62089 9.66316 1.11962 9.07143 1.11962H2.64286C2.05112 1.11962 1.57143 1.62089 1.57143 2.23925V5.59811C1.57143 6.21646 2.05112 6.71774 2.64286 6.71774H3.71429V8.1696L4.90517 6.71774ZM5.39796 7.83736L2.64286 10.6364V7.83736C1.45939 7.83736 0.5 6.83481 0.5 5.59811V2.23925C0.5 1.00254 1.45939 0 2.64286 0H9.07143C10.2549 0 11.2143 1.00254 11.2143 2.23925V5.59811C11.2143 6.83481 10.2549 7.83736 9.07143 7.83736H5.39796Z" fill="white"/>
 </svg>
+
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx
index fb5f464b60c4b..3e1efa8ea64df 100644
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat.tsx
@@ -12,23 +12,26 @@ import { i18n } from '@kbn/i18n';
 // import { EuiButtonEmpty } from '@elastic/eui';
 // import { euiThemeVars } from '@kbn/ui-theme';
 
-import { useChatConfig } from './use_chat_config';
+import { useChatConfig, ChatApi } from './use_chat_config';
+export type { ChatApi } from './use_chat_config';
 
 export interface Props {
   /** Handler invoked when chat is hidden by someone. */
   onHide?: () => void;
   /** Handler invoked when the chat widget signals it is ready. */
-  onReady?: () => void;
+  onReady?: (chatApi: ChatApi) => void;
   /** Handler invoked when the chat widget signals to be resized. */
   onResize?: () => void;
+
+  onPlaybookFired?: () => void;
 }
 
 /**
  * A component that will display a trigger that will allow the user to chat with a human operator,
  * when the service is enabled; otherwise, it renders nothing.
  */
-export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
-  const config = useChatConfig({ onReady, onResize });
+export const Chat = ({ onHide = () => {}, onReady, onResize, onPlaybookFired }: Props) => {
+  const config = useChatConfig({ onReady, onResize, onPlaybookFired });
   const ref = useRef<HTMLDivElement>(null);
   const [isClosed, setIsClosed] = useState(false);
 
@@ -36,13 +39,11 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
     return null;
   }
 
-  const { isReady, isResized, style } = config;
-  const { right } = style;
-
-  // clipPath: 'inset(40px 4px 72px 30px)',
+  const { isReady } = config;
 
   return (
     <iframe
+      loading="lazy"
       data-test-subj="cloud-chat-frame"
       title={i18n.translate('xpack.cloudChat.chatFrameTitle', {
         defaultMessage: 'Chat',
@@ -59,8 +60,6 @@ export const Chat = ({ onHide = () => {}, onReady, onResize }: Props) => {
               // position
               top: 32,
               right: 0,
-              // trim
-              clipPath: 'inset(24px 4px 76px 30px)',
             }
           : { position: 'absolute' }
       }
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat_button.tsx b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/chat_button.tsx
new file mode 100644
index 0000000000000..e69de29bb2d1d
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/index.ts b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/index.ts
index ceed215208b64..550a4e80c8d03 100644
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/index.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/index.ts
@@ -4,9 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
 /**
  * A component that will display a trigger that will allow the user to chat with a human operator,
  * when the service is enabled; otherwise, it renders nothing.
  */
 export { Chat } from './chat';
+export type { ChatApi, Props } from './chat';
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/use_chat_config.ts b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/use_chat_config.ts
index 1b88445155140..13bb7404d3623 100644
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/use_chat_config.ts
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/use_chat_config.ts
@@ -21,6 +21,12 @@ type UseChatType =
       isResized: boolean;
     };
 
+export interface ChatApi {
+  show: () => void;
+  hide: () => void;
+  toggle: () => void;
+}
+
 const MESSAGE_WIDGET_READY = 'driftWidgetReady';
 const MESSAGE_IFRAME_READY = 'driftIframeReady';
 const MESSAGE_RESIZE = 'driftIframeResize';
@@ -35,13 +41,14 @@ type ChatConfigParams = Exclude<ChatProps, 'onHide'>;
 export const useChatConfig = ({
   onReady = () => {},
   onResize = () => {},
+  onPlaybookFired = () => {},
 }: ChatConfigParams): UseChatType => {
   const ref = useRef<HTMLIFrameElement>(null);
   const chat = useChat();
-  const history = useHistory();
   const [style, setStyle] = useState<CSSProperties>({ height: 0, width: 0 });
   const [isReady, setIsReady] = useState(false);
   const [isResized, setIsResized] = useState(false);
+  const isChatOpenRef = useRef<boolean>(false);
 
   useEffect(() => {
     const handleMessage = (event: MessageEvent): void => {
@@ -56,6 +63,40 @@ export const useChatConfig = ({
       const { user: userConfig } = chat;
       const { id, email, jwt, trialEndDate, kbnVersion, kbnBuildNum } = userConfig;
 
+      const chatApi: ChatApi = {
+        show: () => {
+          ref.current?.contentWindow?.postMessage(
+            {
+              type: `driftShow`,
+            },
+            '*'
+          );
+          ref.current?.contentWindow?.postMessage(
+            {
+              type: `driftOpenChat`,
+            },
+            '*'
+          );
+          isChatOpenRef.current = true;
+        },
+        hide: () => {
+          ref.current?.contentWindow?.postMessage(
+            {
+              type: `driftHide`,
+            },
+            '*'
+          );
+          isChatOpenRef.current = false;
+        },
+        toggle: () => {
+          if (isChatOpenRef.current) {
+            chatApi.hide();
+          } else {
+            chatApi.show();
+          }
+        },
+      };
+
       switch (message.type) {
         // The IFRAME is ready to receive messages.
         case MESSAGE_IFRAME_READY: {
@@ -97,8 +138,19 @@ export const useChatConfig = ({
 
         // The chat widget is ready.
         case MESSAGE_WIDGET_READY:
+          chatApi.hide();
           setIsReady(true);
-          onReady();
+          onReady(chatApi);
+          break;
+
+        case 'driftChatClosed':
+          chatApi.hide();
+          break;
+
+        case 'driftPlaybookFired':
+          onPlaybookFired();
+          break;
+
         default:
           break;
       }
@@ -107,31 +159,17 @@ export const useChatConfig = ({
     window.addEventListener('message', handleMessage);
 
     return () => window.removeEventListener('message', handleMessage);
-  }, [chat, style, onReady, onResize, isReady, isResized]);
-
-  useEffect(() => {
-    if (!isReady) return;
-    if (!history) return;
-
-    const unlisten = history.listen(() => {
-      // eslint-disable-next-line no-console
-      console.log('drift: posting update', getChatContext().window.location.href);
-      ref.current?.contentWindow?.postMessage(
-        {
-          type: MESSAGE_UPDATE_CONTEXT,
-          data: { context: getChatContext() },
-        },
-        '*'
-      );
-    });
-
-    return () => {
-      unlisten();
-    };
-  }, [history, isReady]);
+  }, [chat, style, onReady, onResize, isReady, isResized, onPlaybookFired]);
 
   if (chat) {
-    return { enabled: true, src: chat.chatURL, ref, style, isReady, isResized };
+    return {
+      enabled: true,
+      src: chat.chatURL,
+      ref,
+      style,
+      isReady,
+      isResized,
+    };
   }
 
   return { enabled: false };
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/when_idle.ts b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/when_idle.ts
new file mode 100644
index 0000000000000..c11cd61e13d53
--- /dev/null
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/chat/when_idle.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export function whenIdle(doWork: () => void) {
+  const requestIdleCallback = window.requestIdleCallback || window.setTimeout;
+  if (document.readyState === 'complete') {
+    requestIdleCallback(() => doWork());
+  } else {
+    window.addEventListener('load', () => {
+      requestIdleCallback(() => doWork());
+    });
+  }
+}
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/index.tsx b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/index.tsx
index e0aab671de279..e5db9c7857186 100644
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/components/index.tsx
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/components/index.tsx
@@ -7,6 +7,7 @@
 
 import React, { Suspense } from 'react';
 import { EuiErrorBoundary } from '@elastic/eui';
+import type { Props } from './chat';
 
 /**
  * A suspense-compatible version of the Chat component.
@@ -17,10 +18,10 @@ export const LazyChat = React.lazy(() => import('./chat').then(({ Chat }) => ({
  * A lazily-loaded component that will display a trigger that will allow the user to chat with a
  * human operator when the service is enabled; otherwise, it renders nothing.
  */
-export const Chat = () => (
+export const Chat = (props: Props) => (
   <EuiErrorBoundary>
-    <Suspense fallback={<div />}>
-      <LazyChat />
+    <Suspense fallback={<></>}>
+      <LazyChat {...props} />
     </Suspense>
   </EuiErrorBoundary>
 );
diff --git a/x-pack/plugins/cloud_integrations/cloud_chat/public/plugin.tsx b/x-pack/plugins/cloud_integrations/cloud_chat/public/plugin.tsx
index f385ad6a17cee..74c96dc3ddb8f 100755
--- a/x-pack/plugins/cloud_integrations/cloud_chat/public/plugin.tsx
+++ b/x-pack/plugins/cloud_integrations/cloud_chat/public/plugin.tsx
@@ -16,13 +16,15 @@ import { ReplaySubject } from 'rxjs';
 import { InternalApplicationSetup } from '@kbn/core-application-browser-internal';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
 import { I18nProvider } from '@kbn/i18n-react';
-import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 import type { GetChatUserDataResponseBody } from '../common/types';
 import { GET_CHAT_USER_DATA_ROUTE_PATH } from '../common/constants';
 import { ChatConfig, ServicesProvider } from './services';
 import { isTodayInDateWindow } from '../common/util';
 import { Chat } from './components';
 import chatIcon from './chat_icon.svg';
+import type { ChatApi } from './components/chat';
+import { whenIdle } from './components/chat/when_idle';
 
 interface CloudChatSetupDeps {
   cloud: CloudSetup;
@@ -86,29 +88,49 @@ export class CloudChatPlugin implements Plugin<void, void, CloudChatSetupDeps, C
 
     function ChatHeaderMenuItem() {
       const [show, setShow] = React.useState(false);
+      const [chatApi, setChatApi] = React.useState<ChatApi | null>(null);
 
       return (
         <CloudContextProvider>
           <KibanaThemeProvider theme$={core.theme.theme$}>
             <I18nProvider>
-              <EuiHeaderSectionItemButton
-                data-test-subj="cloudChat"
-                notification={true}
-                onClick={() => setShow(!show)}
-              >
-                <EuiIcon type={chatIcon} size="m" />
-              </EuiHeaderSectionItemButton>
+              {show && (
+                <EuiButtonEmpty
+                  css={{ color: '#fff', marginRight: 12 }}
+                  size="s"
+                  iconType={chatIcon}
+                  data-test-subj="cloudChat"
+                  onClick={() => {
+                    chatApi?.toggle();
+                  }}
+                >
+                  Live Chat
+                </EuiButtonEmpty>
+              )}
             </I18nProvider>
           </KibanaThemeProvider>
-          {show && <Chat />}
+          {ReactDOM.createPortal(
+            <Chat
+              onReady={(_chatApi) => {
+                setChatApi(_chatApi);
+              }}
+              onPlaybookFired={() => {
+                setShow(true);
+              }}
+            />,
+            document.body
+          )}
         </CloudContextProvider>
       );
     }
 
-    core.chrome.navControls.registerRight({
-      order: 1000,
+    core.chrome.navControls.registerExtension({
+      order: 50,
       mount: (e) => {
-        ReactDOM.render(<ChatHeaderMenuItem />, e);
+        // postpone rendering to avoid slowing the page load
+        whenIdle(() => {
+          ReactDOM.render(<ChatHeaderMenuItem />, e);
+        });
 
         return () => {
           ReactDOM.unmountComponentAtNode(e);