API metody Javascriptu

Po načtení Javascriptové knihovny, můžete volat následující API funkce, které vám dovolí s widgetem pracovat.

Instalation

Include the standalone-widget.js script in your HTML:

<script src="https://cdn.msgok.net/client/widget/widget-v20-beta.js"></script>

Basic Usage

Create a widget instance with a unique ID and configuration options:

<script src="https://cdn.msgok.net/client/widget/widget-v20-beta.js"></script>

<script>
 window.helpWidgetInitQueue = window.helpWidgetInitQueue || [];
  window.helpWidgetInitQueue.push({
    instanceId: 'main-widget',
    assignToWindowAs: 'myWidget', // Make instance accessible via window.myWidget
    options: {
      template: '[your-widget-id]',
      displayMode: 'popup',
      primaryColor: '#f97316',
      buttonText: 'Need help?'
    }
 });
</script>

Information Methods

`getInstanceId()`

Returns the instance ID of the widget.

const instanceId = myWidget.getInstanceId(); // Returns 'main-widget'

`isOpen()`

Checks if the widget is currently open (popup/modal modes only).

if (myWidget.isOpen()) {
  console.log('The widget is open');
}

`getButtonElement()`

Returns the button DOM element (null for inline mode).

const button = myWidget.getButtonElement();
if (button) {
  button.style.boxShadow = '0 0 10px rgba(0,0,0,0.3)';
}

`getContainerElement()`

Returns the container DOM element.

const container = myWidget.getContainerElement();
if (container) {
  console.log('Container height:', container.offsetHeight);
}

`getFrameElement()`

Returns the iframe DOM element.

const frame = myWidget.getFrameElement();
if (frame) {
  console.log('Frame source:', frame.src);
}

`getConfig()`

Returns a copy of the widget's current configuration.

const config = myWidget.getConfig();
console.log('Primary color:', config.primaryColor);

Visibility Control Methods

`open()`

Opens the widget (popup/modal only).

document.getElementById('open-help').addEventListener('click', () => {
  myWidget.open();
});

`close()`

Closes the widget (popup/modal only).

document.getElementById('close-help').addEventListener('click', () => {
  myWidget.close();
});

`toggle()`

Toggles the open/close state (popup/modal only).

document.getElementById('toggle-help').addEventListener('click', () => {
  myWidget.toggle();
});

`show()`

Makes the widget button visible (respects display constraints).

// Show the widget button if it was hidden
myWidget.show();

`hide()`

Hides the widget button completely.

// Hide the widget button until needed
myWidget.hide();

`openToContent(contentId, forceExpand)`

Opens the widget and navigates to specific content.

// Open widget to specific content
myWidget.openToContent('getting-started');

// Open and force expanded view
myWidget.openToContent('pricing-details', true);

`openToSearch(searchValue)`

Opens the widget and performs a search.

// Open widget with search results
myWidget.openToSearch('how to export data');

`openToForm(formId, variables, standalone)`

Opens the widget and navigates to a specific form.

// Open widget to contact form
myWidget.openToForm('contact-support');

// Open with pre-filled variables
myWidget.openToForm('feedback', { 
  email: '[email protected]', 
  subject: 'Feature request' 
});

// Open as standalone form (without navigation; when user close the form, whole widet is also closed)
myWidget.openToForm('bug-report', null, true);

Configuration Update Methods

`changeButtonType(type)`

Changes the button type (popup/modal only).

// Options: 'icon-only', 'text-only', 'icon-and-text'
myWidget.changeButtonType('icon-and-text');

`changeButtonText(text, closeText)`

Changes the button text (popup/modal only).

// Change button text and optional close text
myWidget.changeButtonText('Support', 'Close Help');

`changeButtonDescription(description)`

Changes the button description (popup/modal only).

myWidget.changeButtonDescription('Click for instant help');

`changeIconPosition(position)`

Changes the icon position for 'icon-and-text' button type (popup/modal only).

// Options: 'before', 'after'
myWidget.changeIconPosition('after');

`changeButtonIcons(helpIconSvg, closeIconSvg)`

Changes the button icons (popup/modal only).

// Custom SVG icons
myWidget.changeButtonIcons(
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M9 12h6"></path><path d="M12 9v6"></path></svg>',
  '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M15 9l-6 6"></path><path d="M9 9l6 6"></path></svg>'
);

`toggleMobileVisibility(show)`

Controls visibility on mobile devices.

// Show or hide widget on mobile
myWidget.toggleMobileVisibility(true);

`updateBlacklist(blacklist)`

Updates the URL paths where the widget should be hidden.

// Hide widget on specified paths
myWidget.updateBlacklist(['/checkout', '/admin', '/private']);

`togglePulseEffect(enable)`

Enables or disables the pulsing animation on the button.

// Toggle button pulse effect
myWidget.togglePulseEffect(true);

`updateBanners(banners)`

Updates the static banners configuration.

// Update static banners
myWidget.updateBanners([
  {
    id: 'welcome-banner',
    title: 'Welcome!',
    description: 'Check out our new features',
    buttons: [
      {
        id: 'guide-btn',
        text: 'Learn More',
        type: 'link',
        style: 'primary',
        linkContentId: 'new-features'
      },
      {
        id: 'close-btn',
        text: 'Later',
        type: 'close'
      }
    ],
    conditions: {
      timeOnPage: 5,
      pageUrl: '/dashboard'
    }
  }
]);

`setPrimaryColor(color)`

Sets the primary color for the widget button.

// Change primary color
myWidget.setPrimaryColor('#3b82f6');

`setHoverColor(color)`

Sets the hover color for the widget button.

// Change hover color
myWidget.setHoverColor('#2563eb');

`setVariable(key, value)`

Sets a variable for the widget session.

// Set or update a variable
myWidget.setVariable('userType', 'premium');
myWidget.setVariable('theme', 'dark');

`addDynamicBanner(bannerConfig)`

Adds or updates a dynamic banner.

// Add a dynamic banner
myWidget.addDynamicBanner({
  id: 'promo-banner',
  title: 'Special Offer!',
  description: 'Limited time discount on all plans',
  expires_at: '2024-12-31T23:59:59Z', // Optional, defaults to 72h
  targetInstanceId: 'main-widget', // Required for link/search/form buttons
  buttons: [
    {
      id: 'view-offer',
      text: 'View Offer',
      type: 'form',
      style: 'primary',
      linkContentId: 'special-offers',
      target: "form-id",
      variables: {
        orderid: 123456789
      }
    },
    {
      id: 'dismiss',
      text: 'No Thanks',
      type: 'close'
    }
  ],
  conditions: {
    timeOnPage: 30,
    pageUrl: '/pricing'
  }
});

Cleanup Methods

`destroy()` / `remove()`

Removes the widget instance and cleans up resources.

// Remove the widget completely
myWidget.destroy();

// or
myWidget.remove(); // Alias for destroy()

Config

Option	Default Value	Description
`template`		Use an ID of your widget
`buttonType`	`'icon-only'`	Type of button ('icon-only', 'text-only', 'icon-and-text')
`iconPosition`	`'before'`	Position of the icon relative to text ('before', 'after')
`buttonText`	`'Need help?'`	Text displayed on the button
`buttonDescription`	`''`	Secondary text for the button
`buttonTextClose`	`'Close'`	Text displayed on the button when the widget is open
`primaryColor`	`'#f97316'`	Main color theme for the widget button
`hoverColor`	`'#ea580c'`	Color of the button on hover
`showMobile`	`true`	Whether the widget is visible on mobile devices
`hideByDefault`	`false`	Whether the widget is initially hidden
`enablePulse`	`true`	Enables the pulsing animation on the button
`blacklistUrl`	`[]`	Array of URL paths where the widget should be hidden
`displayMode`	`'popup'`	How the widget is displayed ('popup', 'modal', 'inline')
`target`	`null`	DOM element selector for 'inline' mode
`banners`	`[]`	Array of static banner configurations
`widthDefault`	`380`	Default width in pixels for popup/inline modes
`widthExpand`	`450`	Maximum width in pixels for popup expansion
`maxHeight`	`600`	Maximum height in pixels for popup/inline modes
`widthBanner`	`300`	Default width in pixels for banner display
`variables`	`{}`	Key-value pairs for initial widget session variables
`buttonIconSvg`	default icon	Custom SVG string for the 'open' icon
`buttonCloseIconSvg`	default icon	Custom SVG string for the 'close' icon
`buttonCloseIconSvg`	default icon	Custom SVG string for the 'close' icon

API metody Javascriptu

Instalation

Basic Usage

Information Methods

`getInstanceId()`

`isOpen()`

`getButtonElement()`

`getContainerElement()`

`getFrameElement()`

`getConfig()`

Visibility Control Methods

`open()`

`close()`

`toggle()`

`show()`

`hide()`

Navigation Methods

`openToContent(contentId, forceExpand)`

`openToSearch(searchValue)`

`openToForm(formId, variables, standalone)`

Configuration Update Methods

`changeButtonType(type)`

`changeButtonText(text, closeText)`

`changeButtonDescription(description)`

`changeIconPosition(position)`

`changeButtonIcons(helpIconSvg, closeIconSvg)`

`toggleMobileVisibility(show)`

`updateBlacklist(blacklist)`

`togglePulseEffect(enable)`

`updateBanners(banners)`

`setPrimaryColor(color)`

`setHoverColor(color)`

`setVariable(key, value)`

Dynamic Banner Methods

`addDynamicBanner(bannerConfig)`

Cleanup Methods

`destroy()` / `remove()`

Config

Default Configuration Options for client side Widget

Instalation​

Basic Usage​

Information Methods​

getInstanceId()​

isOpen()​

getButtonElement()​

getContainerElement()​

getFrameElement()​

getConfig()​

Visibility Control Methods​

open()​

close()​

toggle()​

show()​

hide()​

Navigation Methods​

openToContent(contentId, forceExpand)​

openToSearch(searchValue)​

openToForm(formId, variables, standalone)​

Configuration Update Methods​

changeButtonType(type)​

changeButtonText(text, closeText)​

changeButtonDescription(description)​

changeIconPosition(position)​

changeButtonIcons(helpIconSvg, closeIconSvg)​

toggleMobileVisibility(show)​

updateBlacklist(blacklist)​

togglePulseEffect(enable)​

updateBanners(banners)​

setPrimaryColor(color)​

setHoverColor(color)​

setVariable(key, value)​

Dynamic Banner Methods​

addDynamicBanner(bannerConfig)​

Cleanup Methods​

destroy() / remove()​

Config​

Default Configuration Options for client side Widget​

Instalation

Basic Usage

Information Methods

`getInstanceId()`

`isOpen()`

`getButtonElement()`

`getContainerElement()`

`getFrameElement()`

`getConfig()`

Visibility Control Methods

`open()`

`close()`

`toggle()`

`show()`

`hide()`

Navigation Methods

`openToContent(contentId, forceExpand)`

`openToSearch(searchValue)`

`openToForm(formId, variables, standalone)`

Configuration Update Methods

`changeButtonType(type)`

`changeButtonText(text, closeText)`

`changeButtonDescription(description)`

`changeIconPosition(position)`

`changeButtonIcons(helpIconSvg, closeIconSvg)`

`toggleMobileVisibility(show)`

`updateBlacklist(blacklist)`

`togglePulseEffect(enable)`

`updateBanners(banners)`

`setPrimaryColor(color)`

`setHoverColor(color)`

`setVariable(key, value)`

Dynamic Banner Methods

`addDynamicBanner(bannerConfig)`

Cleanup Methods

`destroy()` / `remove()`

Config

Default Configuration Options for client side Widget