{"type":"doc","content":[{"type":"paragraph","content":[{"text":"This documentation describes how to create and maintain list widgets in Pika.","type":"text","marks":[{"type":"strong"}]}]},{"type":"rule"},{"type":"paragraph","content":[{"text":"Table of Contents ","type":"text","marks":[{"type":"strong"}]},{"type":"inlineExtension","attrs":{"extensionType":"com.atlassian.confluence.macro.core","extensionKey":"anchor","parameters":{"macroParams":{"":{"value":"topofpage"},"legacyAnchorId":{"value":"CreatingListWidgets-topofpage"}},"macroMetadata":{"macroId":{"value":"4a18d417-687e-4c48-98b7-7d4ec624e8a4"},"schemaVersion":{"value":"1"},"title":"Anchor"}},"localId":"10c7b212-a142-4078-b840-fa6b3fa8c242"}}]},{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"toc","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"7c339409-d74b-496a-9b54-102612a13647"},"schemaVersion":{"value":"1"},"title":"Table of Contents"}},"localId":"aa042167-f4f0-4b7c-b2fa-78451c30bbb1"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"What are List Widgets?","type":"text"}]},{"type":"paragraph","content":[{"text":"The basic idea of a List Widget is to embed a search or list from Pika on your library homepage for display. List widgets are a seamless way to display targeted content from the catalog on your website and direct patrons to titles in the catalog directly from your library website.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":981,"alt":"Screenshot of a list widget from a library website homepage","id":"5f7117cf-a3fe-4097-afcf-ac1e3e58a798","collection":"contentId-660242482","type":"file","height":413},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"panel","attrs":{"panelType":"note"},"content":[{"type":"paragraph","content":[{"text":"Widgets embedded on webpages always display starting somewhere in the middle of their respective sources (list or search) rather than at the very beginning/left hand side. This is by design so the results don’t appear empty on webpages.","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]},{"text":" ","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Getting started","type":"text"}]},{"type":"paragraph","content":[{"text":"In order to create the List Widget, you must be signed in. Your account must have a user role of library admin or content editor. A content editor has permissions to create List Widgets, editorial reviews and Browse Categories. ","type":"text"}]},{"type":"paragraph","content":[{"text":"Once you’re logged in, click on the ","type":"text"},{"text":"List Widget","type":"text","marks":[{"type":"strong"}]},{"text":" link under the Pika Configuration tab.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":238,"alt":"Screenshot of the pika configuration menu highlighting the list widgets menu option","id":"6da9f802-4975-43a9-80d8-0b1971a0ee80","collection":"contentId-660242482","type":"file","height":64},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Click on the ","type":"text"},{"text":"Add New List Widget","type":"text","marks":[{"type":"strong"}]},{"text":" button to create a new widget. ","type":"text"}]},{"type":"paragraph","content":[{"text":"You can also find a widget you have already created by narrowing down the search by ","type":"text"},{"text":"Id","type":"text","marks":[{"type":"strong"}]},{"text":", ","type":"text"},{"text":"Library","type":"text","marks":[{"type":"strong"}]},{"text":", or ","type":"text"},{"text":"Name","type":"text","marks":[{"type":"strong"}]},{"text":". You can edit existing widgets by clicking on the ","type":"text"},{"text":"Edit","type":"text","marks":[{"type":"strong"}]},{"text":" link under Actions.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":100.0},"content":[{"type":"media","attrs":{"width":865,"alt":"Screenshot of the list widgets table highlighting the add new list widget button, the search and sort options, and the edit access link","id":"ae6c612d-3378-485e-9af3-5c6ed680b67c","collection":"contentId-660242482","type":"file","height":299},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Creating a widget and widget options","type":"text"}]},{"type":"paragraph","content":[{"text":"Click on the ","type":"text"},{"text":"Add New List Widget","type":"text","marks":[{"type":"strong"}]},{"text":" button to create a new list widget. ","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Library","type":"text"}]},{"type":"paragraph","content":[{"text":"Library","type":"text","marks":[{"type":"strong"}]},{"text":" is a dropdown menu that limits the availability of the widget. Choose your library in this field. When a specific library is assigned, only admin patrons at your library will be able to edit the widget. ","type":"text"}]},{"type":"paragraph","content":[{"text":"If the widget can be used by all libraries, set the library value to ","type":"text"},{"text":"All Libraries","type":"text","marks":[{"type":"strong"}]},{"text":". (This is not a common setting)","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Name","type":"text"}]},{"type":"paragraph","content":[{"text":"Name","type":"text","marks":[{"type":"strong"}]},{"text":" is the title of your widget. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":566,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":470,"alt":"Screenshot of the library menu and the name field","id":"5112de57-2e48-410a-ae38-0b33fdcc5075","collection":"contentId-660242482","type":"file","height":162},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Show the list widget’s title bar","type":"text"}]},{"type":"paragraph","content":[{"text":"If the ","type":"text"},{"text":"Show the list widget’s title bar","type":"text","marks":[{"type":"strong"}]},{"text":" option is enabled, the text from the ","type":"text"},{"text":"Name ","type":"text","marks":[{"type":"strong"}]},{"text":"field for the widget will display in the bar if the widget only has a single tab. If there is more than one tab in the widget, the ","type":"text"},{"text":"Name","type":"text","marks":[{"type":"strong"}]},{"text":" will not display in the title bar.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start"},"content":[{"type":"media","attrs":{"width":228,"alt":"Screenshot of the show the list widget title bar option","id":"ff9fdc51-9665-446c-8dfa-02c635813318","collection":"contentId-660242482","type":"file","height":37},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Show the list widget’s title bar","type":"text","marks":[{"type":"strong"}]},{"text":". ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":660,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":660,"alt":"Screenshot of a list widget highlighting the name in the title bar","id":"83c211d6-fe50-4357-b00c-a70a93cffe2b","collection":"contentId-660242482","type":"file","height":338},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Show view more","type":"text"}]},{"type":"paragraph","content":[{"text":"Show the View More link on the title bar of the widget","type":"text","marks":[{"type":"strong"}]},{"text":" controls where the View More link is shown. When a user clicks on the ","type":"text"},{"text":"View More","type":"text","marks":[{"type":"em"}]},{"text":" link in a widget, they will be directed to the search results or list that is the source for the widget","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":488,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":378,"alt":"Screenshot of the view more option","id":"c4027ca0-9455-4159-bd92-a5ecc8356c36","collection":"contentId-660242482","type":"file","height":43},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"View More","type":"text","marks":[{"type":"strong"}]},{"text":" link that shows up when the ","type":"text"},{"text":"Show the View More Link on the title bar of the widget","type":"text","marks":[{"type":"strong"}]},{"text":" is checked. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":898,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1191,"alt":"Screenshot of a widget highlighting the view more link","id":"523aa5a9-6fb0-47a2-a4a8-15cd8fae0920","collection":"contentId-660242482","type":"file","height":309},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Display mode for search results","type":"text"}]},{"type":"paragraph","content":[{"text":"Display mode for search results link","type":"text","marks":[{"type":"strong"}]},{"text":" is used to show full search results when the ","type":"text"},{"text":"View More","type":"text","marks":[{"type":"em"}]},{"text":" link option is enabled and the source for the widget is search results.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":452,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":445,"alt":"Screenshot of the display mode for search results link option","id":"bac9dd67-c3e7-45b6-b5e4-4a4856959b38","collection":"contentId-660242482","type":"file","height":116},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Description","type":"text"}]},{"type":"paragraph","content":[{"text":"Description ","type":"text","marks":[{"type":"strong"}]},{"text":"is for internal use. You can copy and paste any search strings used to create the widget or the list ID if you’re using a list for a source.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":538,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":444,"alt":"Screenshot of the description field","id":"eaeb9531-6517-49a5-b2bf-f2eb4e70076a","collection":"contentId-660242482","type":"file","height":117},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Should description pop-up","type":"text"}]},{"type":"paragraph","content":[{"type":"hardBreak"},{"text":"Should the description pop-up be shown when hovering over titles? ","type":"text","marks":[{"type":"strong"}]},{"text":"Is used when you want to have a description show when someone hovers over a title.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":65.0},"content":[{"type":"media","attrs":{"width":459,"alt":"Screenshot of the should description popup option","id":"a66d1df3-4ef0-41d1-8f8f-fcb25a95b1bf","collection":"contentId-660242482","type":"file","height":40},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Number of titles display","type":"text"}]},{"type":"paragraph","content":[{"text":"The number of titles that should be shown for the widget ","type":"text","marks":[{"type":"strong"}]},{"text":"option is used to limit the amount of titles that display in the widget. The default value is 25 and likely should not be changed, especially if the search results that are referenced are quite large","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":493,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":450,"alt":"Screenshot of the number of titles display option","id":"30c76a03-1399-4c7d-97ed-2d35da1252c4","collection":"contentId-660242482","type":"file","height":81},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Title information display options","type":"text"}]},{"type":"paragraph","content":[{"text":"There are three settings that can be chosen to show information about the titles in your widget.","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Should the title for the currently selected item be shown?","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Should the author (catalog items) /format (archive items) for the currently selected item be shown?","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Should ratings widgets be shown under each cover?","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"All three options can be enabled in conjunction with one another, you can enable a single option, or you can enable a combination of any two options. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"If both title and author name are enabled or all three options are enabled, you will need to adjust the height of the widget in the iframe to accommodate the ","type":"text"},{"text":"Auto Rotation","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://marmot-support.atlassian.net/wiki/spaces/MKB/pages/edit-v2/660242482#Auto-Rotation-option"}}]},{"text":" option. ","type":"text"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Should the title for the currently selected item be shown","type":"text"}]},{"type":"paragraph","content":[{"text":"When this option is enabled, the title will display under the cover art in the carousel.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of a widget that has the ","type":"text"},{"text":"title listed","type":"text","marks":[{"type":"strong"}]},{"text":" under the item, as well as one without the title.","type":"text"}]},{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":293,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":237,"alt":"Screenshot of a title in a widget with the title display","id":"53ddb558-1af6-4cfc-b474-0b6f453c7ee7","collection":"contentId-660242482","type":"file","height":239},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":369,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":263,"alt":"Screenshot of a title in a widget without the title display","id":"66573d91-6b58-4dcf-9c02-77d3543969c0","collection":"contentId-660242482","type":"file","height":209},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Should the author (catalog items)/format (archive items) for the currently selected item be shown","type":"text"}]},{"type":"paragraph","content":[{"text":"This setting determines if the ","type":"text"},{"text":"author’s name","type":"text","marks":[{"type":"strong"}]},{"text":" ","type":"text"},{"text":"is displayed","type":"text","marks":[{"type":"strong"}]},{"text":" under the item.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of a widget that has the ","type":"text"},{"text":"author listed","type":"text","marks":[{"type":"strong"}]},{"text":" under the item, as well as one without the author.","type":"text"},{"type":"hardBreak"}]},{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":330,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":240,"alt":"Screenshot of a title in a widget with the author display","id":"28c319e9-61ad-4cf4-914f-d796fc787d66","collection":"contentId-660242482","type":"file","height":243},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":379,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":263,"alt":"Screenshot of a title in a widget without the author display","id":"66573d91-6b58-4dcf-9c02-77d3543969c0","collection":"contentId-660242482","type":"file","height":209},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Should ratings widgets be shown under each cover","type":"text"}]},{"type":"paragraph","content":[{"text":"This setting determines if the ","type":"text"},{"text":"rating is displayed","type":"text","marks":[{"type":"strong"}]},{"text":" under the item.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of a widget that has the ","type":"text"},{"text":"ratings listed","type":"text","marks":[{"type":"strong"}]},{"text":" under the item, as well as one without the rating.","type":"text"}]},{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":335,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":219,"alt":"Screenshot of a title in a widget with the ratings display","id":"bceb37b2-c4f3-473e-bc33-fb605091ac8e","collection":"contentId-660242482","type":"file","height":204},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"mediaSingle","attrs":{"layout":"center","width":385,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":263,"alt":"Screenshot of a title in a widget without the ratings display","id":"66573d91-6b58-4dcf-9c02-77d3543969c0","collection":"contentId-660242482","type":"file","height":209},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]}]}]},{"type":"paragraph","content":[{"text":" Below is an example of a widget with all three display options enabled.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":1216,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1900,"alt":"Screenshot of a title in a widget with the title, author, and rating display","id":"3bbe9a06-79d2-4120-bbc2-f020270629b0","collection":"contentId-660242482","type":"file","height":339},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Style to use when displaying the list widget","type":"text"}]},{"type":"paragraph","content":[{"text":"There are several options for widget display styles. Use the drop down menu to change the style of a list widget. ","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Horizontal","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Vertical","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Single Title","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Single Title with Next Button","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Text Only List","type":"text"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":65.0},"content":[{"type":"media","attrs":{"width":450,"alt":"Screenshot of the display style dropdown menu","id":"9a98a289-dcf9-4a4a-a076-ee17f4c13c92","collection":"contentId-660242482","type":"file","height":159},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Horizontal","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of a ","type":"text"},{"text":"Horizontal","type":"text","marks":[{"type":"strong"}]},{"text":" widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":693,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":802,"alt":"Screenshot of a horizontal widget style","id":"6e0e7737-8d16-4ed8-ac3f-8107f987ea8b","collection":"contentId-660242482","type":"file","height":341},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Vertical","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of a ","type":"text"},{"text":"Vertical ","type":"text","marks":[{"type":"strong"}]},{"text":"widget. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"The title and author do not display in this display style, even if enabled.","type":"text"}]}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":277,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":164,"alt":"Screenshot of the vertical widget style","id":"2d8f69e4-78ce-4667-b108-2f611f3e20ca","collection":"contentId-660242482","type":"file","height":648},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":4},"content":[{"text":"Single Title","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Single Title","type":"text","marks":[{"type":"strong"}]},{"text":" style will display only one title.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Single Title","type":"text","marks":[{"type":"strong"}]},{"text":" style. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":266,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":266,"alt":"Screenshot of the single title style","id":"2ef32668-1a03-4198-8efc-7f7428c95b40","collection":"contentId-660242482","type":"file","height":363},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"There are no user controls in the Single Title style. If more than one title is being displayed, you should enable auto rotation so patrons can see all titles. ","type":"text"}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Single Title with Next Button","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Single Title with a Next Button","type":"text","marks":[{"type":"strong"}]},{"text":" style will display only one title and includes user controls with the ","type":"text"},{"text":"Next ","type":"text","marks":[{"type":"em"}]},{"text":"button.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Single Title with a Next Button","type":"text","marks":[{"type":"strong"}]},{"text":". The user will have control to scroll through the items.","type":"text"}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"align-start","width":285,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":285,"alt":"Screenshot of the single title with next button style","id":"8c48f90c-d44d-49e9-8c95-20156ac17837","collection":"contentId-660242482","type":"file","height":357},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of a library that is using multiple ","type":"text"},{"text":"Single Title with a Next Button","type":"text","marks":[{"type":"strong"}]},{"text":" to display books, movies, music and games.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"width":1046,"alt":"Screenshot of several single title with next button widgets on single webpage","id":"3e8133c9-df7b-49b4-a2b7-be5b06e400aa","collection":"contentId-660242482","type":"file","height":357},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":4},"content":[{"text":"Text Only List","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Text Only List","type":"text","marks":[{"type":"strong"}]},{"text":" style will display the information without images.","type":"text"}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Text Only List","type":"text","marks":[{"type":"strong"}]},{"text":". ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":454,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":454,"alt":"Screenshot of the text only style","id":"777983f3-0b40-46a9-9a64-34b48e0ffa84","collection":"contentId-660242482","type":"file","height":400},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Auto Rotation option","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":558,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":378,"alt":"Screenshot of the auto rotation option","id":"d034a4c0-5f9f-493f-9153-23b6ed192782","collection":"contentId-660242482","type":"file","height":43},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"should the widget automatically rotate between titles ","type":"text","marks":[{"type":"strong"}]},{"text":"option forces the the carousel to advance automatically. You can enable this option on the Horizontal, Vertical, and Single Title widgets. ","type":"text"}]},{"type":"paragraph","content":[{"text":"If this option is enabled, a Play/Pause button will display in the widget which will allow users to pause the auto-rotation to meet accessibility standards.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":1172,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1903,"alt":"Screenshot of a horizontal widget with the auto rotation option, highlighting the play pause button","id":"83fd29ca-8819-4aea-b4ae-7cef7cb17b4e","collection":"contentId-660242482","type":"file","height":389},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Cover Size","type":"text"}]},{"type":"paragraph","content":[{"text":"The cover size to use when showing a widget","type":"text","marks":[{"type":"strong"}]},{"text":" has a drop down choice of ","type":"text"},{"text":"Small","type":"text","marks":[{"type":"strong"}]},{"text":" or ","type":"text"},{"text":"Medium","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":75.0},"content":[{"type":"media","attrs":{"width":454,"alt":"Screenshot of the cover size option","id":"1627ea00-1e6b-4107-b228-c34b18c00ad2","collection":"contentId-660242482","type":"file","height":110},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Small","type":"text","marks":[{"type":"strong"}]},{"text":" cover size on a Horizontal widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"width":662,"alt":"Screenshot of widget with the small cover size option","id":"4a78f8c0-c02a-49f1-9173-762a2e61cc32","collection":"contentId-660242482","type":"file","height":257},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Medium","type":"text","marks":[{"type":"strong"}]},{"text":" cover size on a Horizontal widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"width":665,"alt":"Screenshot of widget with the medium cover size option","id":"10e42088-1ba3-4c14-9a81-da1db04d397a","collection":"contentId-660242482","type":"file","height":322},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Custom CSS","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Custom CSS File","type":"text","marks":[{"type":"strong"}]},{"text":" is for styling the widget for your website. If you use this option in the widget, the corresponding CSS file for the widget should be hosted on your website. The URL to the hosted Custom CSS File is entered in the ","type":"text"},{"text":"Custom CSS File","type":"text","marks":[{"type":"strong"}]},{"text":" field. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":65.0},"content":[{"type":"media","attrs":{"width":452,"alt":"Screenshot of the custom CSS file field","id":"b4830f15-65e9-45f4-ad52-069ca8408a3c","collection":"contentId-660242482","type":"file","height":79},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Marmot recommends that you add custom CSS for widgets on your ","type":"text"},{"text":"Pika Admin page under ","type":"text","marks":[{"type":"link","attrs":{"href":"https://marmot-support.atlassian.net/wiki/spaces/MKB/pages/763920385/Basic+Display#Additional-CSS"}}]},{"text":"Additional CSS","type":"text","marks":[{"type":"strong"},{"type":"link","attrs":{"href":"https://marmot-support.atlassian.net/wiki/spaces/MKB/pages/763920385/Basic+Display#Additional-CSS"}}]},{"text":". ","type":"text"}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"hardBreak"},{"text":"Display lists as","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Display lists as","type":"text","marks":[{"type":"strong"}]},{"text":" is a function that determines how you display multiple lists within one List Widget. There is a Tabbed Display or a Drop Down List.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":75.0},"content":[{"type":"media","attrs":{"width":458,"alt":"Screenshot of the display lists as field","id":"bbe9c08b-2fbb-4339-825a-8dfdb5d64e78","collection":"contentId-660242482","type":"file","height":113},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Tabbed Display ","type":"text","marks":[{"type":"strong"}]},{"text":"style. The ","type":"text"},{"text":"Tabbed Display","type":"text","marks":[{"type":"strong"}]},{"text":" is the most common option","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":1156,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1909,"alt":"Screenshot of a horizontal widget with the tabbed display style","id":"70ce9a9d-2473-42b8-803c-6ab9049a402d","collection":"contentId-660242482","type":"file","height":425},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of the ","type":"text"},{"text":"Drop Down List ","type":"text","marks":[{"type":"strong"}]},{"text":"style. The ","type":"text"},{"text":"Drop Down List ","type":"text","marks":[{"type":"strong"}]},{"text":"style allows users to choose the widget tab they wish to view from the drop down menu at the top of the widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1032,"alt":"Screenshot of a horizontal widget with the drop down list display style","id":"6a591c2c-63c3-4981-ba84-c8144b6b03a6","collection":"contentId-660242482","type":"file","height":402},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Lists","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Lists","type":"text","marks":[{"type":"strong"}]},{"text":" table controls the various tabs that are applied to a list widget. ","type":"text"}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Name","type":"text","marks":[{"type":"strong"}]},{"text":" in the ","type":"text"},{"text":"Lists","type":"text","marks":[{"type":"strong"}]},{"text":" table is the title of the given tab. The ","type":"text"},{"text":"Source ","type":"text","marks":[{"type":"strong"}]},{"text":"field is what Pika uses to reference the source list or search for the specific tab. You can drag and drop with the arrows in the ","type":"text"},{"text":"Sort","type":"text","marks":[{"type":"strong"}]},{"text":" column to reorder the tabs. Use the ","type":"text"},{"text":"Add New","type":"text","marks":[{"type":"strong"}]},{"text":" button to create a new tab in the existing widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":844,"alt":"Screenshot of the lists table highlighting the columns and add new button","id":"d4fab31d-8a69-4d58-8b38-a890d9e9289f","collection":"contentId-660242482","type":"file","height":314},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Live Preview","type":"text"}]},{"type":"paragraph","content":[{"text":"You can view the changes you’ve committed to the widget in real time with the ","type":"text"},{"text":"Live Preview","type":"text","marks":[{"type":"strong"}]},{"text":". There are two ","type":"text"},{"text":"Live Preview ","type":"text","marks":[{"type":"strong"}]},{"text":"windows in the form. The first, under the ","type":"text"},{"text":"List Widget Integration Notes","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"section is the preview for the most basic list widget. The second, under the ","type":"text"},{"text":"List Widget with Resizing Integration Notes","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"},{"type":"em"}]},{"text":"is the preview for the same widget with automatic resizing. ","type":"text"}]},{"type":"layoutSection","marks":[{"type":"breakout","attrs":{"mode":"full-width"}}],"content":[{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"Basic preview","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center","width":566,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":701,"alt":"Screenshot of the basic live preview","id":"5aae8873-c3da-45e1-a5c8-75c1b235e1c4","collection":"contentId-660242482","type":"file","height":456},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph"}]},{"type":"layoutColumn","attrs":{"width":50.0},"content":[{"type":"paragraph","content":[{"text":"Preview with resizing","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph"},{"type":"mediaSingle","attrs":{"layout":"center","width":570,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":696,"alt":"Screenshot of the live preview with resizing","id":"d8bc1134-188a-4414-b428-594c01389c55","collection":"contentId-660242482","type":"file","height":467},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"text":"You can also use the ","type":"text"},{"text":"Preview Widget as a Page","type":"text","marks":[{"type":"strong"}]},{"text":" option to preview your widget on a separate webpage, which will more accurately represent what the widget might look like on a webpage on your library website. Right click the button to open the preview webpage in a new tab. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":885,"alt":"Screenshot of the list widget admin page highlighting the preview widget as a page button","id":"fcb99f5a-2c2c-4f9f-b8fc-ff3c71fa16e7","collection":"contentId-660242482","type":"file","height":439},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"mediaSingle","attrs":{"layout":"wide","width":990,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1886,"alt":"Screenshot of the widget preview webpage","id":"00c2e15e-3e2d-4f1b-9bf4-09388b5a7aec","collection":"contentId-660242482","type":"file","height":494},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Creating a List Widget from User List or adding a User List as a List Widget tab","type":"text"}]},{"type":"paragraph","content":[{"text":"You can add to an existing list widget or create a new list widget from the admin controls in a public User List. ","type":"text"}]},{"type":"paragraph","content":[{"text":"In the ","type":"text"},{"text":"My Lists","type":"text","marks":[{"type":"strong"}]},{"text":" page in the Account, choose a public list that you would like to add to your List Widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":806,"alt":"Screenshot of a user list in the my lists page","id":"c37666f3-cbf6-46f6-a1d2-6eef96172a78","collection":"contentId-660242482","type":"file","height":232},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"If the ","type":"text"},{"text":"Make Public","type":"text","marks":[{"type":"strong"}]},{"text":" button is showing, click it to make your list public. Otherwise, you will not see the Create Widget button.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1113,"alt":"Screenshot of the user list options highlighting the make public button","id":"b0ae19cb-e2f4-4bc8-b4c4-ceb2212468dd","collection":"contentId-660242482","type":"file","height":158},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Public lists will have the necessary Admin Options. Click on the drop-down menu and choose ","type":"text"},{"text":"Create Widget","type":"text","marks":[{"type":"strong"}]},{"text":".","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":90.0},"content":[{"type":"media","attrs":{"width":1036,"alt":"Screenshot of the my lists options, highlighting the admin options menu and the create widget option","id":"10d1a465-423b-4f16-8d71-1ace7a18d03d","collection":"contentId-660242482","type":"file","height":238},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Use the ","type":"text"},{"text":"Select a widget menu ","type":"text","marks":[{"type":"strong"}]},{"text":"to select an existing widget if you want to add the list as a tab to an existing widget. If you want to create a new widget from the list, choose the ","type":"text"},{"text":"Create a new widget","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"option from the ","type":"text"},{"text":"Select a widget","type":"text","marks":[{"type":"strong"}]},{"text":" menu. Add a relevant name in the ","type":"text"},{"text":"New Widget Name / New Tab Name","type":"text","marks":[{"type":"strong"}]},{"text":" field and click ","type":"text"},{"text":"Create widget","type":"text","marks":[{"type":"strong"}]},{"text":" to complete the action.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"width":903,"alt":"Screenshot of the create widget dialog highlighting the name field and the create widget button","id":"c63dec6f-c740-40dc-b628-e185dcac13a7","collection":"contentId-660242482","type":"file","height":477},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Here is an example of a list that has been added to the List Widget.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"align-start","width":80.0},"content":[{"type":"media","attrs":{"width":671,"alt":"Screenshot of a widget highlighting a newly added tab from the create widget option","id":"920613f7-6f99-405e-81ba-9cf585285ebc","collection":"contentId-660242482","type":"file","height":359},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Creating a List Widget from Search Results","type":"text"}]},{"type":"paragraph","content":[{"text":"You can create a List Widget from ","type":"text"},{"text":"Search","type":"text","marks":[{"type":"strong"}]},{"text":" results or use the search results that populate an existing ","type":"text"},{"text":"Browse Category.","type":"text","marks":[{"type":"strong"}]}]},{"type":"paragraph","content":[{"text":"If you’re creating a list widget from unique search results, build the desired search to use as the source for your List Widget. If you’re creating a list widget from a browse category search, click on the title of the browse category next to the spyglass icon to access the search results that populate the browse category. ","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":1183,"alt":"Screenshot of the catalog homepage highlighting the search access link for a chosen browse category","id":"0029e1a3-d7b8-4f3e-848e-95b05527c40d","collection":"contentId-660242482","type":"file","height":521},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"At the bottom of the page of the desired search results click on ","type":"text"},{"text":"Create Widget ","type":"text","marks":[{"type":"strong"}]},{"text":"(you must be logged in with your Pika admin account to see this option).","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":888,"alt":"Screenshot of the search tools highlighting the create widget admin search tool","id":"f908abed-4bb8-49bc-b70c-7fc6b9756415","collection":"contentId-660242482","type":"file","height":132},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"The ","type":"text"},{"text":"Create a Widget","type":"text","marks":[{"type":"strong"}]},{"text":" dialog will popup. Use the ","type":"text"},{"text":"Select a widget menu ","type":"text","marks":[{"type":"strong"}]},{"text":"to select an existing widget if you want to add the search as a tab to an existing widget. If you want to create a new widget from the search results, choose the ","type":"text"},{"text":"Create a new widget","type":"text","marks":[{"type":"em"}]},{"text":" ","type":"text","marks":[{"type":"strong"}]},{"text":"option from the ","type":"text"},{"text":"Select a widget","type":"text","marks":[{"type":"strong"}]},{"text":" menu. Add a relevant name in the ","type":"text"},{"text":"New Widget Name / New Tab Name","type":"text","marks":[{"type":"strong"}]},{"text":" field and click ","type":"text"},{"text":"Create widget","type":"text","marks":[{"type":"strong"}]},{"text":" to complete the action.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":729,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":729,"alt":"Screenshot of the create widget dialog highlighting the select a widget menu, the name field, and the create widget button","id":"b6eb0bb1-d197-4608-8c5d-53901428b6e5","collection":"contentId-660242482","type":"file","height":453},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Completing the action will direct you to the List Widget admin page for the new widget or the widget you added the search to as a tab, respectively.","type":"text"}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":867,"alt":"Screenshot of the list widget admin page","id":"3a2f89d4-d2b9-423e-809a-1cad34570b33","collection":"contentId-660242482","type":"file","height":779},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"iFrame Embed Code","type":"text"}]},{"type":"paragraph","content":[{"text":"In the widget admin page, scroll down to the ","type":"text"},{"text":"Integration notes","type":"text","marks":[{"type":"strong"}]},{"text":". You will see the iframe code. If the widget is finished, you can copy the HTML code for the iframe and embed it into your library website. The width and height may need to be changed to fit on your website. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"The basic iframe does not resize well for mobile devices.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Please be mindful of the accessibility requirements for the iframe, specifically providing an iframe title for the widget. There is linked documentation in the integration notes.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When inserting the widget title in the iframe code, remove the brackets from the code, leaving only the quotation marks around the title you’re providing ","type":"text"},{"text":"e.g. title=”Embedded Widget Title”","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":823,"alt":"Screenshot of the basic list widget integration code, highlighting the iframe and accessibility standards notes","id":"0245d008-3c43-4519-886b-a17e74b0606c","collection":"contentId-660242482","type":"file","height":734},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"List Widget with Resizing Embed Code","type":"text"}]},{"type":"paragraph","content":[{"text":"Scroll down to the ","type":"text"},{"text":"List Widget with Resizing and Integration notes","type":"text","marks":[{"type":"strong"}]},{"text":". Copy the ","type":"text"},{"text":"entire","type":"text","marks":[{"type":"strong"}]},{"text":" code to use to embed into your website. ","type":"text"}]},{"type":"panel","attrs":{"panelType":"info"},"content":[{"type":"paragraph","content":[{"text":"This code will resize widgets on mobile devices.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"Please be mindful of the accessibility requirements for the iframe, specifically providing an iframe title for the widget. There is linked documentation in the integration notes.","type":"text"}]}]},{"type":"panel","attrs":{"panelType":"warning"},"content":[{"type":"paragraph","content":[{"text":"When inserting the widget title in the iframe code, remove the brackets from the code, leaving only the quotation marks around the title you’re providing ","type":"text"},{"text":"e.g. title=”Embedded Widget Title”","type":"text","marks":[{"type":"strong"}]}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":835,"alt":"Screenshot of the list widget with resizing integration code, highlighting the iframe","id":"57d226a4-64fc-420f-a6ca-fc0f5471665e","collection":"contentId-660242482","type":"file","height":811},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"mediaSingle","attrs":{"layout":"center","width":760,"widthType":"pixel"},"content":[{"type":"media","attrs":{"width":811,"alt":"Screenshot of the list widget with resizing integration code, highlighting the accessibility standards notes","id":"31ef9930-6bb1-4053-8c0b-585e1eaf0de3","collection":"contentId-660242482","type":"file","height":654},"marks":[{"type":"border","attrs":{"size":2,"color":"#091e4224"}}]}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Adding multiple List Widgets to a website","type":"text"}]},{"type":"paragraph","content":[{"text":"You will not need all of the code for each widget. Below is an example mark-up for multiple widgets, and the inclusion of the resizing code just once. ","type":"text"}]},{"type":"paragraph","content":[{"text":"You will need an additional Jquery line jQuery(\"#listWidget178\").iFrameResize(); for each widget that is on the page.","type":"text"}]},{"type":"codeBlock","attrs":{"language":"html"},"marks":[{"type":"breakout","attrs":{"mode":"wide"}}],"content":[{"text":"\n \n\n\n \n\n \n\n\n\n\n \n\n\n\n\n\n\n\n","type":"text"}]},{"type":"paragraph","content":[{"text":"Top of page","type":"text","marks":[{"type":"link","attrs":{"href":"#topofpage"}}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Related Documentation","type":"text"}]},{"type":"bodiedExtension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"details","parameters":{"macroParams":{},"macroMetadata":{"macroId":{"value":"a7d2d547-9909-404a-ae36-cd0c194b2cf3"},"schemaVersion":{"value":"1"},"title":"Page Properties"}},"localId":"155bb723-531e-46d6-b048-b2662e7a9d0a"},"content":[{"type":"extension","attrs":{"layout":"default","extensionType":"com.atlassian.confluence.macro.core","extensionKey":"contentbylabel","parameters":{"macroParams":{"showLabels":{"value":"false"},"cql":{"value":"label in ( \"pika\" , \"pika_administrator\" , \"admin\" ) and label != \"sierra\" and space != \"MD\""}},"macroMetadata":{"macroId":{"value":"325faa24-3675-414b-a397-6f17b98eeba7"},"schemaVersion":{"value":"4"},"title":"Filter by label (Content by label)"}},"localId":"2234e52a-c27a-4f09-a28a-9aa7c6d49526"}}]},{"type":"paragraph"}],"version":1}