TypeScript definitions for the Zendesk Web Widget

zendesk.d.ts

interface ZendeskWidget {
  (
    type: 'webWidget:on' | 'webWidget' | 'webWidget:get',
    command: string,
    payload?: any,
  ): void;
  (
    type: 'webWidget',
    command: 'updateSettings',
    payload: ZendeskSettings,
  ): void;
}

interface ZendeskUIString {
  [locale: string]: string;
}

interface ZendeskField {
  id: string | number;
  prefill: ZendeskUIString;
}

interface ZendeskSettings {
  analytics?: boolean;
  cookies?: boolean;
  errorReporting?: boolean;
  webWidget?: {
    answerBot?: {
      avatar?: {
        url: string;
        name: ZendeskUIString;
      };
      suppress?: boolean;
      title?: ZendeskUIString;
      contactOnlyAfterQuery?: boolean;
      search?: {
        labels: string[];
      };
    };
    authenticate?: {
      chat?: {
        jwtFn: (callback: (jwtToken: string) => void) => void;
      };
      jwtFn?: (callback: (jwtToken: string) => void) => void;
    };
    contactForm?: {
      attachments?: boolean;
      fields?: ZendeskField[];
      selectTicketForm?: ZendeskUIString;
      subject?: boolean;
      suppress?: boolean;
      title?: ZendeskUIString;
      ticketForms?: Array<{ id: number; fields?: ZendeskField[] }>;
    };
    contactOptions?: {
      enabled?: boolean;
      contactButton?: ZendeskUIString;
      contactFormLabel?: ZendeskUIString;
      chatLabelOnline?: ZendeskUIString;
      chatLabelOffline?: ZendeskUIString;
    };
    chat?: {
      concierge?: {
        avatarPath: string;
        name: string;
        title: ZendeskUIString;
      };
      departments?: {
        enabled: string[];
        select?: string;
      };
      hideWhenOffline?: boolean;
      menuOptions?: {
        emailTranscript?: boolean;
      };
      notifications?: {
        mobile?: {
          disable?: boolean;
        };
      };
      offlineForm?: {
        greeting?: ZendeskUIString;
      };
      prechatForm?: {
        greeting?: ZendeskUIString;
        departmentLabel?: ZendeskUIString;
      };
      profileCard?: {
        avatar?: boolean;
        rating?: boolean;
        title?: boolean;
      };
      suppress?: boolean;
      tags?: string;
      title?: ZendeskUIString;
    };
    color?: {
      theme?: string;
      launcher?: string;
      launcherText?: string;
      button?: string;
      resultLists?: string;
      header?: string;
      articleLinks?: string;
    };
    helpCenter?: {
      messageButton?: ZendeskUIString;
      originalArticleButton?: boolean;
      searchPlaceholder?: ZendeskUIString;
      suppress?: boolean;
      title?: ZendeskUIString;
      chatButton?: ZendeskUIString;
      filter?: {
        category?: string;
        section?: string;
        label_names?: string;
      };
    };
    launcher?: {
      label?: ZendeskUIString;
      mobile?: {
        labelVisible?: boolean;
      };
      badge?: {
        label?: ZendeskUIString;
        image?: string;
        layout?: 'image_right' | 'image_left' | 'image_only' | 'text_only';
      };
      chatLabel?: ZendeskUIString;
    };
    navigation?: {
      popoutButton?: {
        enabled?: boolean;
      };
    };
    offset?: {
      horizontal?: string;
      vertical?: string;
      mobile?: {
        horizontal?: string;
        vertical?: string;
      };
    };
    position?: {
      horizontal: 'left' | 'right';
      vertical: 'top' | 'bottom';
    };
    talk?: {
      nickname?: string;
      suppress?: boolean;
      title?: ZendeskUIString;
    };
    zIndex?: number;
  };
}

interface Window {
  zESettings?: ZendeskSettings;
  zE?: ZendeskWidget;
}

Thanks for this inspiration!

I'm updating to the messaging SDK, took a shot at copying most of the docs into types in https://gist.github.com/wuservices/c0c3de056f5e528c9145b1df128b5c83. The new API is more more limited.

Just sharing in case somebody else stumbles upon this and is updating too.