Skip to content

feat: Migrate CommandBar HelpHub SDK for Documentation Site #1391

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bogdan-volynets merged 2 commits into from
Jan 19, 2026
Merged

feat: Migrate CommandBar HelpHub SDK for Documentation Site #1391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca734e6
replaced commandAI's helpHub with amplitude's guides and surveys inte…
bogdan-volynets Jan 13, 2026
0ec256d
refactor after review
bogdan-volynets Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions _includes/argohub-docs-navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,7 @@

{% if page.layout != "home" %}
<button
onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
document.querySelector('input[data-testid=helphub-input]').focus()
Copy link
Contributor Author

@bogdan-volynets bogdan-volynets Jan 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the search input has a focused state by default when you open the amplitude's guides and surveys.

}, 100)"
onclick="window.engagement.rc.open();"
class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
aria-label="Search Codefresh Documentation"
type="button"
Expand Down
4 changes: 1 addition & 3 deletions _includes/docs-navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,9 +131,7 @@

{% if page.layout != "home" %}
<button
onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
document.querySelector('input[data-testid=helphub-input]').focus()
}, 100)"
onclick="window.engagement.rc.open();"
class="helpbub-toggler helpbub-toggler-small order-2 order-md-2"
aria-label="Search Codefresh Documentation"
type="button"
Expand Down
87 changes: 68 additions & 19 deletions _includes/scripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,24 +60,73 @@
<!-- End of Doc Search Embed Code -->

<script>
const commandbarSegment = IS_GITOPS_DOC_COOKIE_SET ? '43836ac3': '3033bf7f'

var o=commandbarSegment,n=["Object.assign","Symbol","Symbol.for"].join("%2C"),a=window;function r(o,n){void 0===n&&(n=!1),"complete"!==document.readyState&&window.addEventListener("load",r.bind(null,o,n),{capture:!1,once:!0});var a=document.createElement("script");a.type="text/javascript",a.async=n,a.src=o,document.head.appendChild(a)}function t(){var n;if(void 0===a.CommandBar){delete a.__CommandBarBootstrap__;var t=Symbol.for("CommandBar::configuration"),e=Symbol.for("CommandBar::orgConfig"),i=Symbol.for("CommandBar::disposed"),c=Symbol.for("CommandBar::isProxy"),m=Symbol.for("CommandBar::queue"),d=Symbol.for("CommandBar::unwrap"),l=Symbol.for("CommandBar::eventSubscriptions"),s=[],u=localStorage.getItem("commandbar.lc"),f=u&&u.includes("local")?"http://localhost:8000":"https://api.commandbar.com",p=Object.assign(((n={})[t]={uuid:o},n[e]={},n[i]=!1,n[c]=!0,n[m]=new Array,n[d]=function(){return p},n[l]=void 0,n),a.CommandBar),b=["addCommand","boot","addEventSubscriber","addRecordAction","setFormFactor"],y=p;Object.assign(p,{shareCallbacks:function(){return{}},shareContext:function(){return{}}}),a.CommandBar=new Proxy(p,{get:function(o,n){return n in y?p[n]:"then"!==n?b.includes(n)?function(){var o=Array.prototype.slice.call(arguments);return new Promise((function(a,r){o.unshift(n,a,r),p[m].push(o)}))}:function(){var o=Array.prototype.slice.call(arguments);o.unshift(n),p[m].push(o)}:void 0}}),null!==u&&s.push("lc=".concat(u)),s.push("version=2"),r("".concat(f,"/latest/").concat(o,"?").concat(s.join("&")),!0)}}void 0===Object.assign||"undefined"==typeof Symbol||void 0===Symbol.for?(a.__CommandBarBootstrap__=t,r("https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features="+n)):t();
window.CommandBar.setThemeMode('dark_mode')
window.CommandBar.boot(
"",
{},
{ canOpenEditor: false, products: ["help_hub"] }
);

document.addEventListener("keydown", function (event) {
const isMac = navigator.userAgent.includes('Mac');
if ((event.key === "k") && ((isMac && event.metaKey) || (!isMac && event.ctrlKey))) {
event.preventDefault();
window.CommandBar.openHelpHub();
setTimeout(() => {
document.querySelector('input[data-testid=helphub-input]').focus()
}, 100);
// Initialize Amplitude Analytics + Guides & Surveys (Resource Center)
(function() {
const API_KEY = '42885a887590b9e28cce52518224850b';

// Load and initialize Amplitude Analytics first
function loadAnalyticsSDK() {
const script = document.createElement('script');
script.src = `https://cdn.amplitude.com/script/${API_KEY}.js`;
script.onload = onAnalyticsLoaded;
script.onerror = () => console.error('Failed to load Amplitude Analytics');
document.head.appendChild(script);
}

function onAnalyticsLoaded() {
if (typeof window.amplitude === 'undefined') {
console.warn('Amplitude Analytics not available');
return;
}

window.amplitude.init(API_KEY, {
Copy link
Contributor Author

@bogdan-volynets bogdan-volynets Jan 16, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I investigated this and found that userId is an optional parameter for this function. Amplitude automatically generates a unique deviceId and persists it in local storage, so a new user is not created each time the docs site is opened. In my opinion, this is an ideal out-of-the-box solution for our docs site.

autocapture: false,
});

setContentSegmentation();
loadEngagementSDK();
}

// Load and initialize Guides & Surveys SDK
function loadEngagementSDK() {
const script = document.createElement('script');
script.src = `https://cdn.amplitude.com/script/${API_KEY}.engagement.js`;
script.onload = onEngagementLoaded;
script.onerror = () => console.error('Failed to load Amplitude Engagement');
document.head.appendChild(script);
}

function onEngagementLoaded() {
if (typeof window.engagement === 'undefined') {
console.warn('Amplitude Engagement not available');
return;
}

window.amplitude.add(window.engagement.plugin());
setupResourceCenterShortcut();
}

function setupResourceCenterShortcut() {
document.addEventListener('keydown', function(event) {
const isMac = navigator.userAgent.includes('Mac');
const isShortcut = (event.key === 'k') &&
((isMac && event.metaKey) || (!isMac && event.ctrlKey));

if (isShortcut) {
event.preventDefault();
window.engagement.rc.open();
}
});
}

// Set content segment based on system type
function setContentSegmentation() {
const identify = new window.amplitude.Identify();
const segment = IS_GITOPS_DOC_COOKIE_SET ? 'gitOpsCloud' : 'enterprise';
identify.set('segment', segment);
window.amplitude.identify(identify);
}
});

loadAnalyticsSDK();
})();
</script>
2 changes: 1 addition & 1 deletion assets/css/docs.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/css/docs.min.css.map
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 0 additions & 12 deletions assets/scss/_helpbub.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,3 @@
.helpbub-toggler-small {
max-width: 275px;
}

/* stylelint-disable selector-max-id */
#helphub-modal {
inset: 0;
margin: auto;
}

.codehilite {
code {
color: $helphub-copilot-code-color !important
}
}
1 change: 0 additions & 1 deletion assets/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ $bd-link-hover-color: color.adjust($bd-link-color, $lightness: -15%) !default;
$helpbub-bg: #3f4255;
$helpbub-text-color: #b0c4e7;
$helpbub-border: #35384b;
$helphub-copilot-code-color: #eff;

// Fonts
// stylelint-disable value-keyword-case
Expand Down
4 changes: 1 addition & 3 deletions gitops/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ <h2 class="mb-3 bd-text-white text-uppercase">
</p>
<!-- <div id="searchbar"></div>-->
<button
onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
document.querySelector('input[data-testid=helphub-input]').focus()
}, 100)"
onclick="window.engagement.rc.open();"
class="helpbub-toggler mb-3"
aria-label="Search Codefresh Documentation"
type="button"
Expand Down
4 changes: 1 addition & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ <h2 class="mb-3 bd-text-white text-uppercase">
</p>
<!-- <div id="searchbar"></div>-->
<button
onclick="window.CommandBar.openHelpHub(); setTimeout(() => {
document.querySelector('input[data-testid=helphub-input]').focus()
}, 100)"
onclick="window.engagement.rc.open();"
class="helpbub-toggler mb-3"
aria-label="Search Codefresh Documentation"
type="button"
Expand Down