Documentation Index

Fetch the complete documentation index at: https://docs.velt.dev/docs/llms.txt

Use this file to discover all available pages before exploring further.

​

2.0.29

​

New Features

• [Comments]: Added feature to render a comment bubble on the comment pin or triangle instead of the comment dialog. Hovering or clicking the bubble will open the comment dialog.
  • React / Next.js
  • Other Frameworks

  Using props:

  <VeltComments bubbleOnHover={true} />
  

  Using API:

  const commentElement = client.getCommentElement();
  commentElement.showBubbleOnHover(); // Enable bubble on hover
  commentElement.hideBubbleOnHover(); // Disable bubble on hover
  

  Using props:

  <velt-comments bubble-on-hover="true"></velt-comments>
  

  Using API:

  const commentElement = Velt.getCommentElement();
  commentElement.showBubbleOnHover(); // Enable bubble on hover
  commentElement.hideBubbleOnHover(); // Disable bubble on hover
  
• [Location]: For multiple location setup, added support for using data-velt-location-id vs full location object for marking additional locations.

​

Improvements

• [Comments]:Refactored comment components code for better maintainability.

​

Bug Fixes

• [Comments]: Fixed an issue where assignee banner text color was not being applied correctly for custom statuses.
• [Notifications]: Fixed an issue where the document name in the notifications documents tab was not being displayed correctly.

​

2.0.28

​

New Features

• [Notifications]: Added ability to customize tabs on the Notifications Panel.
  • React / Next.js with Hooks
  • React / Next.js
  • Other Frameworks

  <VeltNotificationsTool tabConfig={{
      "forYou": {
          name: 'Custom For You',
          enable: true,
      },
      "documents": {
          name: 'Custom Documents',
          enable: true,
      },
      "all": {
          name: 'Custom All',
          enable: false,
      },
  }} />
  

  Using APIs:

  const notificationElement = useNotificationUtils();
  
  const tabConfig = {
    "forYou": {
      name: 'Custom For You',
      enable: true,
    },
    "documents": {
      name: 'Custom Documents',
      enable: true,
    },
    "all": {
      name: "Custom All",
      enable: false,
    },
  };
  
  notificationElement.setTabConfig(tabConfig);
  

  <VeltNotificationsTool tabConfig={{
      "forYou": {
          name: 'Custom For You',
          enable: true,
      },
      "documents": {
          name: 'Custom Documents',
          enable: true,
      },
      "all": {
          name: 'Custom All',
          enable: false,
      },
  }} />
  

  Using APIs:

  const notificationElement = client.getNotificationElement();
  
  const tabConfig = {
    "forYou": {
      name: 'Custom For You',
      enable: true,
    },
    "documents": {
      name: 'Custom Documents',
      enable: true,
    },
    "all": {
      name: 'Custom All',
      enable: false,
    },
  };
  
  notificationElement.setTabConfig(tabConfig);
  

  const tabConfig = {
    "forYou": {
      name: 'Custom For You',
      enable: true,
    },
    "documents": {
      name: 'Custom Documents',
      enable: true,
    },
    "all": {
      name: 'Custom All',
      enable: false,
    },
  };
  
  const notificationsTool = document.querySelector('velt-notifications-tool');
  notificationsTool?.setAttribute("tab-config", JSON.stringify(tabConfig));
  

  Using APIs:

  const notificationElement = Velt.getNotificationElement();
  
  const tabConfig = {
    "forYou": {
      name: 'Custom For You',
      enable: true,
    },
    "documents": {
      name: 'Custom Documents',
      enable: true,
    },
    "all": {
      name: 'Custom All',
      enable: false,
    },
  };
  
  notificationElement.setTabConfig(tabConfig);
  
• [@ mention]: Added ability to override contact list on the client side. Learn more.
  • The merge parameter is used to determine if the new contact list should be merged with the existing contact list or replaced. Default: false.

const contactElement = useContactUtils();

useEffect(() => {
  contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});
}, [contactElement]);

const contactElement = client.getContactElement();
contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});

const contactElement = Velt.getContactElement();
contactElement.updateContactList([{userId: 'userId1', name: 'User Name', email: 'user1@velt.dev'}], {merge: true});

• [Document]: Added ability to set metadata on the document while setting the documentId.
  • You can set any key/value pair in the metadata object. documentName is a special field that we use to display the document name in some Velt Components.

useSetDocument('unique-document-id', {documentName: 'Document Name'});

const { client } = useVeltClient();

useEffect(() => {
    if (client) {
        client.setDocument('unique-document-id', {documentName: 'Document Name'});
    }
}, [client]);

if(Velt){
    Velt.setDocument('unique-document-id', {documentName: 'Document Name'});
}

this.client.setDocument('unique-document-id', {documentName: 'Document Name'});

client.setDocument('unique-document-id', {documentName: 'Document Name'});

​

Improvements

• [Comments]: Improved the get comment annotations API to determine data loading state in React:
  const [loading, setLoading] = useState(true);
  const commentAnnotations = useCommentAnnotations();
  
  useEffect(() => {
    if (commentAnnotations) {
      setLoading(false);
    } else {
      setLoading(true);
    }
  }, [commentAnnotations]);
  
• [Core]:Updated SDK CDN URL in React and Client libraries to point to cdn.velt.dev.