[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fapps\u002Fservicebell\u002Fcomponents":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"seo":8,"breadcrumbs":12,"content":24,"app":29,"examples":44,"showcases":211,"links":212,"dates":228},"\u002Fexamples\u002Fapps\u002Fservicebell\u002Fcomponents","detail","components",true,{"title":9,"description":10,"og_image":11},"ServiceBell UI components examples - Nicelydone","Browse ServiceBell UI component design examples. Preview individual interface elements and explore related component categories. Add live human connection…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F6472c9d8-2a49-41fd-90f2-97724764b506.png",[13,16,19,22],{"label":14,"to":15},"Examples","\u002Fexamples",{"label":17,"to":18},"SaaS app design examples","\u002Fexamples\u002Fapps",{"label":20,"to":21},"ServiceBell design examples","\u002Fexamples\u002Fapps\u002Fservicebell",{"label":23,"to":4},"ServiceBell UI components examples",{"title":23,"eyebrow":25,"description":26,"sections":27,"body":28},"SaaS app examples","Browse ServiceBell UI component design examples. Preview individual interface elements and explore related component categories. Add live human connection to your website",[],[],{"title":30,"slug":31,"description":32,"logo":33,"url":34,"categories":35},"ServiceBell","servicebell","Add live human connection to your website","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fservicebell-132263c9.png","https:\u002F\u002Fwww.servicebell.com",[36,40],{"id":37,"title":38,"slug":39},47,"Customer Service","customer-service",{"id":41,"title":42,"slug":43},82,"Communication","communication",[45,60,74,89,100,115,129,144,159,169,181,196],{"uuid":46,"title":47,"description":48,"canonical_path":4,"image":11,"width":49,"height":50,"image_alt":51,"kind":52,"categories":53,"app":58},"9f8f44df-d0f8-4fca-84d4-5dd8b0a24937","Visitor session timeline","A timeline component showing a visitor's session activity, including the start time and a nested card displaying their browsing history with a specific URL.",839,464,"Visitor session timeline from ServiceBell","component",[54],{"id":55,"title":56,"slug":57},249,"Timeline & history","timeline-history",{"slug":31,"title":30,"logo":33,"categories":59},[],{"uuid":61,"title":62,"description":63,"canonical_path":4,"image":64,"width":65,"height":66,"image_alt":67,"kind":52,"categories":68,"app":72},"53475730-794f-4e1f-840d-c72ba41f2b6a","Segmented control","A segmented control with two options: Overview and Live Session. The Live Session option is currently selected and features a green cursor icon.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Faa42f495-bfcf-4317-9ec0-3857231b7f5e.png",579,208,"Segmented control from ServiceBell",[69],{"id":70,"title":62,"slug":71},218,"segmented-control",{"slug":31,"title":30,"logo":33,"categories":73},[],{"uuid":75,"title":76,"description":77,"canonical_path":4,"image":78,"width":79,"height":80,"image_alt":81,"kind":52,"categories":82,"app":87},"a7223e3a-5fb5-4105-97d4-b9bdb2025d3d","Notification Toast","A small notification toast displaying a message from a team, along with a timestamp and sender information.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4a3196b1-0436-498e-b16b-67bb0332339f.png",780,244,"Notification Toast from ServiceBell",[83],{"id":84,"title":85,"slug":86},167,"Alert","alert",{"slug":31,"title":30,"logo":33,"categories":88},[],{"uuid":90,"title":91,"description":92,"canonical_path":4,"image":93,"width":79,"height":94,"image_alt":95,"kind":52,"categories":96,"app":98},"b9f4a097-53b0-493b-8c91-97c564636808","Status toggle","A segmented control with two options: Open and Closed. The 'Open' option is currently selected.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F1adf8a2a-3c4a-4ba3-a2e7-a43bf8c47bb6.png",204,"Status toggle from ServiceBell",[97],{"id":70,"title":62,"slug":71},{"slug":31,"title":30,"logo":33,"categories":99},[],{"uuid":101,"title":102,"description":103,"canonical_path":4,"image":104,"width":105,"height":106,"image_alt":107,"kind":52,"categories":108,"app":113},"dc816fb4-2cba-4f87-a16c-dc3fd9869a54","User profile row","A user profile row displaying an initial avatar, name, and email address.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F91934113-7123-423f-8482-6dde57ba480a.png",533,202,"User profile row from ServiceBell",[109],{"id":110,"title":111,"slug":112},169,"Avatar","avatar",{"slug":31,"title":30,"logo":33,"categories":114},[],{"uuid":116,"title":117,"description":118,"canonical_path":4,"image":119,"width":120,"height":121,"image_alt":122,"kind":52,"categories":123,"app":127},"cea189b6-f1bd-4205-ac76-0fdb6fea8acd","Incoming call toast","A notification toast alerting the user that a visitor is requesting help, with options to start a call or view the session.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fdba872b6-0aff-4753-b709-9384d3b5d953.png",951,358,"Incoming call toast from ServiceBell",[124],{"id":125,"title":76,"slug":126},247,"notification-element",{"slug":31,"title":30,"logo":33,"categories":128},[],{"uuid":130,"title":131,"description":132,"canonical_path":4,"image":133,"width":134,"height":135,"image_alt":136,"kind":52,"categories":137,"app":142},"f5d6d3ce-4174-4841-93ee-2b0ddf2e7af1","ServiceBell UI component","A modal to install a widget with code snippets","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F8ac3489b-1909-40a9-9c08-0447302d0778.png",2268,1146,"UI component from ServiceBell",[138],{"id":139,"title":140,"slug":141},187,"Code block","code-block",{"slug":31,"title":30,"logo":33,"categories":143},[],{"uuid":145,"title":146,"description":147,"canonical_path":4,"image":148,"width":149,"height":150,"image_alt":151,"kind":52,"categories":152,"app":157},"058a3fb8-8e1a-4250-bfae-0cd51ce73dbd","Integration Card","A card component displaying an integration option for Google Calendar. It includes the service logo, title, description, a 'Manage' button, and a link to documentation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fac0faf46-a62a-4343-a57a-52150b0bb30a.png",1304,730,"Integration Card from ServiceBell",[153],{"id":154,"title":155,"slug":156},174,"Card","card",{"slug":31,"title":30,"logo":33,"categories":158},[],{"uuid":160,"title":161,"description":162,"canonical_path":4,"image":163,"width":149,"height":150,"image_alt":164,"kind":52,"categories":165,"app":167},"0da6b616-a887-4414-b235-8ad285b06509","Integration card","A card component for managing a third-party integration, featuring a logo, title, description, a toggle switch to enable\u002Fdisable, and a link to documentation.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F178fb327-c5d4-4ccc-9521-f59702b6229d.png","Integration card from ServiceBell",[166],{"id":154,"title":155,"slug":156},{"slug":31,"title":30,"logo":33,"categories":168},[],{"uuid":170,"title":171,"description":172,"canonical_path":4,"image":173,"width":174,"height":175,"image_alt":176,"kind":52,"categories":177,"app":179},"76b92b84-5641-427f-9105-678c2d4b9f2a","Error Toast","A toast notification displaying an error message about browser privacy settings blocking push notifications.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4c3d07d8-9367-46a6-ad59-babe8162cada.png",1010,243,"Error Toast from ServiceBell",[178],{"id":125,"title":76,"slug":126},{"slug":31,"title":30,"logo":33,"categories":180},[],{"uuid":182,"title":183,"description":184,"canonical_path":4,"image":185,"width":186,"height":187,"image_alt":188,"kind":52,"categories":189,"app":194},"7e2c251e-e959-4f97-8585-bea29e413042","Settings toggle card","A card containing a setting title, a descriptive subtitle, and a toggle switch to enable or disable the feature.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3cc7be8c-4c83-45ce-905e-9311d81b4af6.png",2236,448,"Settings toggle card from ServiceBell",[190],{"id":191,"title":192,"slug":193},236,"Toggle\u002FSwitch","toggle-switch",{"slug":31,"title":30,"logo":33,"categories":195},[],{"uuid":197,"title":198,"description":199,"canonical_path":4,"image":200,"width":201,"height":202,"image_alt":203,"kind":52,"categories":204,"app":209},"e2e3c5b8-877b-4ab5-9afc-19617b001c99","Time Range Selector Row","A horizontal row of dropdowns used to select a recurring day and a time range, separated by text labels.","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fa5219750-1633-4ff6-8c17-fe5805c04ee9.png",1640,356,"Time Range Selector Row from ServiceBell",[205],{"id":206,"title":207,"slug":208},199,"Input date","input-date",{"slug":31,"title":30,"logo":33,"categories":210},[],[],[213,216,219,222,225],{"label":214,"to":215},"ServiceBell product screens","\u002Fexamples\u002Fapps\u002Fservicebell\u002Fscreens",{"label":217,"to":218},"ServiceBell marketing pages","\u002Fexamples\u002Fapps\u002Fservicebell\u002Fmarketing",{"label":220,"to":221},"ServiceBell user flows","\u002Fexamples\u002Fapps\u002Fservicebell\u002Fflows",{"label":223,"to":224},"Customer Service app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcustomer-service",{"label":226,"to":227},"Communication app examples","\u002Fexamples\u002Fapps\u002Fcategories\u002Fcommunication",{"published_at":229,"updated_at":230},"2023-06-05T14:47:22.000Z","2026-09-13T13:02:39.000Z"]