{"id":4694,"date":"2026-09-20T20:22:41","date_gmt":"2026-09-20T20:22:41","guid":{"rendered":"https:\/\/marketplace.emcptools.com\/widgets\/lottie-player\/"},"modified":"2026-09-21T17:35:43","modified_gmt":"2026-09-21T17:35:43","slug":"lottie-player","status":"publish","type":"page","link":"https:\/\/marketplace.emcptools.com\/widgets\/lottie-player\/","title":{"rendered":"Lottie Player"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4694\" class=\"elementor elementor-4694\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ee71b35 e-flex e-con-boxed e-con e-parent\" data-id=\"ee71b35\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-53ed5d0 e-flex e-con-full e-con e-child\" data-id=\"53ed5d0\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a13281 elementor-widget elementor-widget-html\" data-id=\"7a13281\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"top\"><a href=\"https:\/\/marketplace.emcptools.com\/widgets\/\">&larr; All widgets<\/a><span>Widget 192 &middot; <code>emcp_custom_192<\/code><\/span><\/div><h2 style=\"font-size:36px;margin-bottom:8px\">Lottie Player<\/h2><div class=\"chips\"><span class=\"chip dark\">Elementor widget<\/span><span class=\"chip\">6 layouts<\/span><span class=\"chip\">15 content options<\/span><span class=\"chip\">13 style options<\/span><span class=\"chip\">2 panel sections<\/span><\/div><p>Built with the EMCP Widget Builder and registered under the <b>EMCP Custom<\/b> category of the Elementor panel. Search the panel for: lottie, animation, json, motion, bodymovin.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-befa81b e-flex e-con-full e-con e-child\" data-id=\"befa81b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51b9634 elementor-widget elementor-widget-html\" data-id=\"51b9634\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Setup guide<\/h2><ol><li>Open a page in Elementor, search the panel for <b>Lottie Player<\/b> and drag it into a container.<\/li><li><b>Content &rsaquo; Animation<\/b>: Source, Animation URL, JSON File, Play, Loop, Reverse Direction, Bounce (play back and forth), Speed and 7 more.<\/li><li>Pick a <b>Play<\/b>: Autoplay, When in viewport, On hover, On click (toggle), Scrub with scroll, Do not autoplay (first frame). Each one is shown below.<\/li><li><b>Style tab<\/b> sections: Size &amp; Frame. Colours, typography and spacing set here are scoped to this widget instance.<\/li><li>Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.<\/li><\/ol><div class=\"note\">Conditional options: <code>Animation URL<\/code> appears when <code>Source<\/code> is url; <code>JSON File<\/code> appears when <code>Source<\/code> is media.<\/div><div class=\"note\">Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.<\/div><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-195e952 e-flex e-con-full e-con e-child\" data-id=\"195e952\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ab3743 elementor-widget elementor-widget-html\" data-id=\"5ab3743\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Autoplay<\/h3><\/div><p class=\"demo-cap\">Play = <code>autoplay<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c705ed elementor-widget elementor-widget-emcp_custom_192\" data-id=\"9c705ed\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--autoplay emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e9d9717 e-flex e-con-full e-con e-child\" data-id=\"e9d9717\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cd85436 elementor-widget elementor-widget-html\" data-id=\"cd85436\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>When in viewport<\/h3><\/div><p class=\"demo-cap\">Play = <code>viewport<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d9dc076 elementor-widget elementor-widget-emcp_custom_192\" data-id=\"d9dc076\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--viewport emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9ac1294 e-flex e-con-full e-con e-child\" data-id=\"9ac1294\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-733e205 elementor-widget elementor-widget-html\" data-id=\"733e205\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>On hover<\/h3><\/div><p class=\"demo-cap\">Play = <code>hover<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5e4c52 elementor-widget elementor-widget-emcp_custom_192\" data-id=\"e5e4c52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--hover emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c19967e e-flex e-con-full e-con e-child\" data-id=\"c19967e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b9f1fdf elementor-widget elementor-widget-html\" data-id=\"b9f1fdf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>On click (toggle)<\/h3><\/div><p class=\"demo-cap\">Play = <code>click<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7408ebc elementor-widget elementor-widget-emcp_custom_192\" data-id=\"7408ebc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--click emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cf47c85 e-flex e-con-full e-con e-child\" data-id=\"cf47c85\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-73290b7 elementor-widget elementor-widget-html\" data-id=\"73290b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Scrub with scroll<\/h3><\/div><p class=\"demo-cap\">Play = <code>scroll<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b3e6f80 elementor-widget elementor-widget-emcp_custom_192\" data-id=\"b3e6f80\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--scroll emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dd50dc6 e-flex e-con-full e-con e-child\" data-id=\"dd50dc6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a5a4b5 elementor-widget elementor-widget-html\" data-id=\"7a5a4b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><div class=\"demo-head\"><span>Layout<\/span><h3>Do not autoplay (first frame)<\/h3><\/div><p class=\"demo-cap\">Play = <code>none<\/code><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ee07dee elementor-widget elementor-widget-emcp_custom_192\" data-id=\"ee07dee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"emcp_custom_192.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"emcp-lt emcp-lt--none emcp-lt--url\" data-url=\"https:\/\/assets2.lottiefiles.com\/packages\/lf20_touohxv0.json\" data-file=\"\" data-loop=\"yes\" data-reverse=\"\" data-bounce=\"\" data-speed=\"1\" data-delay=\"0\" data-start=\"0\" data-end=\"100\" data-renderer=\"svg\"><div class=\"emcp-lt__player\" role=\"img\" aria-label=\"Animation\"><span class=\"emcp-lt__loading\"><\/span><\/div><p class=\"emcp-lt__cap\">Lottie from URL, autoplay<\/p><p class=\"emcp-lt__error\"><\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-42278af e-flex e-con-full e-con e-child\" data-id=\"42278af\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cb333c elementor-widget elementor-widget-html\" data-id=\"7cb333c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>.ewd{font:15px\/1.6 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#101828}.ewd a{color:#6a11cb}.ewd h2{font-size:26px;margin:0 0 12px;font-weight:700}.ewd h3{font-size:19px;margin:24px 0 8px;font-weight:700}.ewd p{margin:0 0 12px}.ewd ol,.ewd ul{margin:0 0 14px 22px;padding:0}.ewd li{margin:0 0 6px}.ewd .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.ewd .chip{background:#f4ebff;color:#6a11cb;border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600}.ewd .chip.dark{background:#101828;color:#fff}.ewd .note{background:#f9fafb;border:1px solid #eaecf0;border-left:4px solid #6a11cb;border-radius:8px;padding:12px 16px;margin:0 0 14px}.ewd table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 24px;border:1px solid #eaecf0}.ewd th{background:#101828;color:#fff;text-align:left;padding:10px 12px;font-weight:600}.ewd td{padding:10px 12px;border-top:1px solid #eaecf0;vertical-align:top}.ewd tr:nth-child(even) td{background:#f9fafb}.ewd code{background:#f2f4f7;border-radius:4px;padding:1px 6px;font-size:12.5px;color:#344054}.ewd .demo-cap{font-size:13px;color:#667085;margin:0 0 10px}.ewd .demo-cap code{color:#6a11cb}.ewd .demo-head{display:flex;align-items:center;gap:10px;margin:0 0 6px}.ewd .demo-head span{background:#6a11cb;color:#fff;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.ewd .demo-head h3{margin:0}.ewd .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px;font-size:14px}.ewd .top a{text-decoration:none;font-weight:600}<\/style><div class=\"ewd\"><h2>Options reference<\/h2><p>Every control the widget exposes, grouped by panel section. Names in <code>code<\/code> are the setting keys used by the MCP tools (<code>add-free-widget<\/code>, <code>update-widget<\/code>).<\/p><h3 style=\"margin-top:8px\">Content tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Animation<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Source<\/b><br><code>source<\/code><\/td><td>Dropdown<\/td><td>External URL (.json or .lottie), Media Library (.json)<\/td><td>url<\/td><td><\/td><\/tr><tr><td><b>Animation URL<\/b><br><code>url<\/code><\/td><td>Text<\/td><td><\/td><td>https:\/\/assets2.lottiefiles.com\/packa...<\/td><td>Shown when source = url<\/td><\/tr><tr><td><b>JSON File<\/b><br><code>file<\/code><\/td><td>Image<\/td><td><\/td><td><\/td><td>Shown when source = media<\/td><\/tr><tr><td><b>Play<\/b><br><code>trigger<\/code><\/td><td>Dropdown<\/td><td>Autoplay, When in viewport, On hover, On click (toggle), Scrub with scroll, Do not autoplay (first frame)<\/td><td>autoplay<\/td><td><\/td><\/tr><tr><td><b>Loop<\/b><br><code>loop<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td>yes<\/td><td><\/td><\/tr><tr><td><b>Reverse Direction<\/b><br><code>reverse<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td><\/td><td><\/td><\/tr><tr><td><b>Bounce (play back and forth)<\/b><br><code>bounce<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td><\/td><td><\/td><\/tr><tr><td><b>Speed<\/b><br><code>speed<\/code><\/td><td>Number<\/td><td>min 0.1, max 5<\/td><td>1<\/td><td><\/td><\/tr><tr><td><b>Start Delay (ms)<\/b><br><code>delay<\/code><\/td><td>Number<\/td><td>min 0, max 10000<\/td><td>0<\/td><td><\/td><\/tr><tr><td><b>Start Frame (%)<\/b><br><code>start<\/code><\/td><td>Number<\/td><td>min 0, max 100<\/td><td>0<\/td><td><\/td><\/tr><tr><td><b>End Frame (%)<\/b><br><code>end<\/code><\/td><td>Number<\/td><td>min 0, max 100<\/td><td>100<\/td><td><\/td><\/tr><tr><td><b>Renderer<\/b><br><code>renderer<\/code><\/td><td>Dropdown<\/td><td>SVG, Canvas<\/td><td>svg<\/td><td><\/td><\/tr><tr><td><b>Link<\/b><br><code>link<\/code><\/td><td>Link<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Caption<\/b><br><code>caption<\/code><\/td><td>Text<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Accessible Label<\/b><br><code>aria<\/code><\/td><td>Text<\/td><td><\/td><td>Animation<\/td><td><\/td><\/tr><\/tbody><\/table><h3 style=\"margin-top:8px\">Style tab<\/h3><p style=\"margin:14px 0 6px;font-weight:700\">Size &amp; Frame<\/p><table><thead><tr><th style=\"width:24%\">Option<\/th><th style=\"width:11%\">Type<\/th><th style=\"width:27%\">Choices \/ range<\/th><th style=\"width:12%\">Default<\/th><th>Notes<\/th><\/tr><\/thead><tbody><tr><td><b>Width<\/b><br><code>width<\/code><\/td><td>Slider<\/td><td>min 5, max 100, %\/px<\/td><td>100<\/td><td>Responsive<\/td><\/tr><tr><td><b>Max Width<\/b><br><code>maxw<\/code><\/td><td>Slider<\/td><td>min 50, max 1600, px<\/td><td><\/td><td><\/td><\/tr><tr><td><b>Aspect Ratio<\/b><br><code>ratio<\/code><\/td><td>Dropdown<\/td><td>From the animation, 1:1, 16:9, 4:3<\/td><td>auto<\/td><td><\/td><\/tr><tr><td><b>Alignment<\/b><br><code>align<\/code><\/td><td>Button group<\/td><td>Left, Center, Right<\/td><td>center<\/td><td><\/td><\/tr><tr><td><b>Background<\/b><br><code>bg<\/code><\/td><td>Color<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Padding<\/b><br><code>pad<\/code><\/td><td>Dimensions<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Radius<\/b><br><code>radius<\/code><\/td><td>Slider<\/td><td>min 0, max 60, px\/%<\/td><td>0<\/td><td><\/td><\/tr><tr><td><b>Border<\/b><br><code>border<\/code><\/td><td>Border<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Shadow<\/b><br><code>shadow<\/code><\/td><td>Box shadow<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Filters<\/b><br><code>filter<\/code><\/td><td>Css_filter<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Scale on Hover<\/b><br><code>hover_scale<\/code><\/td><td>Toggle<\/td><td>on \/ off<\/td><td><\/td><td><\/td><\/tr><tr><td><b>Caption Typography<\/b><br><code>cap_typo<\/code><\/td><td>Typography<\/td><td><\/td><td><\/td><td><\/td><\/tr><tr><td><b>Caption Color<\/b><br><code>cap_color<\/code><\/td><td>Color<\/td><td><\/td><td>#475467<\/td><td><\/td><\/tr><\/tbody><\/table><h3>Add it with the MCP tools<\/h3><p>Any connected agent can place this widget: call <code>add-free-widget<\/code> with <code>widget_type: \"emcp_custom_192\"<\/code> and a <code>settings<\/code> object using the keys above. Run <code>get-custom-widget<\/code> with id <code>192<\/code> for the full JSON spec.<\/p><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&larr; All widgetsWidget 192 &middot; emcp_custom_192 Lottie Player Elementor widget6 layouts15 content options13 style options2 panel sections Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: lottie, animation, json, motion, bodymovin. Setup guide Open a page in Elementor, search the panel for Lottie [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-4694","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4694","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/comments?post=4694"}],"version-history":[{"count":28,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4694\/revisions"}],"predecessor-version":[{"id":6297,"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/pages\/4694\/revisions\/6297"}],"wp:attachment":[{"href":"https:\/\/marketplace.emcptools.com\/widgets\/wp-json\/wp\/v2\/media?parent=4694"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}