https://help.simplybook.me/index.php?action=history&feed=atom&title=Shopify%2Fnl 2026-04-29T06:22:18Z Revision history for this page on the wiki MediaWiki 1.43.0 https://help.simplybook.me/index.php?title=Shopify/nl&diff=34428&oldid=prev 2025-07-01T08:08:04Z

<p>Created page with &quot;:7. Kopieer de volledige code uit het pop-upvenster en plak deze in &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;het HTML-&lt;/span&gt; veld aan de Shopify-kant. Pas indien nodig de breedte van de container aan. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Sla&lt;/span&gt; de wijzigingen &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;op.&lt;/span&gt; <a href="/index.php?title=File:Insert_html_to_shopify_side.png" title="File:Insert html to shopify side.png">border|center</a> &lt;br&gt;&lt;b...&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:08, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l25">Line 25:</td> <td colspan="2" class="diff-lineno">Line 25:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:7. <ins style="font-weight: bold; text-decoration: none;">Kopieer de volledige </ins>code <ins style="font-weight: bold; text-decoration: none;">uit het pop-upvenster en plak deze in </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">het </ins>HTML<ins style="font-weight: bold; text-decoration: none;">-</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">veld aan de </ins>Shopify<ins style="font-weight: bold; text-decoration: none;">-kant</ins>. <ins style="font-weight: bold; text-decoration: none;">Pas indien nodig de breedte van de </ins>container <ins style="font-weight: bold; text-decoration: none;">aan</ins>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Sla&lt;/span&gt; de wijzigingen &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;op.</ins>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:7. <del style="font-weight: bold; text-decoration: none;">Copy the whole </del>code <del style="font-weight: bold; text-decoration: none;">from the popup and insert it to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">field on </del>Shopify <del style="font-weight: bold; text-decoration: none;">side</del>. <del style="font-weight: bold; text-decoration: none;">Adjust </del>container <del style="font-weight: bold; text-decoration: none;">width if necessary</del>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Save</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">the changes</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:8. <del style="font-weight: bold; text-decoration: none;">As the result you will see how the booking widget looks like right away</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:8. <ins style="font-weight: bold; text-decoration: none;">Het resultaat is dat u meteen kunt zien hoe de boekingswidget eruitziet</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <!-- diff cache key wikiv2:diff:1.41:old-34426:rev-34428:php=table --> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/nl&diff=34426&oldid=prev 2025-07-01T08:08:02Z

<p>Created page with &quot;:4. Klik op &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;&#039;Inhoud toevoegen&#039;&lt;/span&gt; en selecteer &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;&#039;Aangepaste HTML&#039;&lt;/span&gt; <a href="/index.php?title=File:Select_html.png" title="File:Select html.png">border|center</a> &lt;br&gt;&lt;br&gt; :5. Ga naar uw &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;SimplyBook.me-account&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Instellingen&lt;...&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:08, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l16">Line 16:</td> <td colspan="2" class="diff-lineno">Line 16:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:4. <ins style="font-weight: bold; text-decoration: none;">Klik op </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">'Inhoud toevoegen'</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">en selecteer </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">'Aangepaste </ins>HTML<ins style="font-weight: bold; text-decoration: none;">'</ins>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:4. <del style="font-weight: bold; text-decoration: none;">Click on </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Add content</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">and select </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Custom </del>HTML&lt;/span&gt;</div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:5. <del style="font-weight: bold; text-decoration: none;">Navigate to your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me account&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Booking widgets settings</del>&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:5. <ins style="font-weight: bold; text-decoration: none;">Ga naar uw </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me<ins style="font-weight: bold; text-decoration: none;">-</ins>account&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Instellingen</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Instellingen voor boekingswidgets</ins>&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame<ins style="font-weight: bold; text-decoration: none;">-</ins>widget&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:6. <del style="font-weight: bold; text-decoration: none;">Adjust the design to your taste and needs, </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">get widget code</del>.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:6. <ins style="font-weight: bold; text-decoration: none;">Pas het ontwerp aan uw smaak en behoeften aan en </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">haal de widgetcode op</ins>.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes</div></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/nl&diff=34424&oldid=prev 2025-07-01T08:08:01Z

<p></p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:08, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l7">Line 7:</td> <td colspan="2" class="diff-lineno">Line 7:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;div class="mw-translate-fuzzy"&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Ga naar &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Online Store&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Themes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Customize&lt;/span&gt; in uw &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Shopify-account.&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:1. Ga naar &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Online Store&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Themes&lt;/span&gt; -&amp;gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Customize&lt;/span&gt; in uw &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Shopify-account.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l17">Line 17:</td> <td colspan="2" class="diff-lineno">Line 16:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:4. Klik op &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;'Add content'&lt;/span&gt; (In &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;houd&lt;/span&gt; toevoegen) en selecteer &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;'Custom HTML'&lt;/span&gt; (Aangepaste &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt;[[File:Select html.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Select html.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:5. Ga naar uw &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me-account&lt;/span&gt; -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Settings (Instellingen&lt;/span&gt; ) -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Booking widgets settings&lt;/span&gt; (Instellingen voor boekingswidgets) -&amp;gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]iFrame-widget[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:6. Pas het ontwerp aan uw smaak en behoeften aan en &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;kopieer de widgetcode.&lt;/span&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:7. Kopieer de volledige code uit het pop-upvenster en plak deze in &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;het HTML-veld&lt;/span&gt; aan de Shopify-kant. Pas indien nodig de breedte van de container aan. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Sla&lt;/span&gt; de wijzigingen &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;op&lt;/span&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Insert html to shopify side.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">:8. Het resultaat is dat u meteen kunt zien hoe de boekingswidget eruitziet.</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">[[File:Shopify widget result.png|border|center]]</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;</div></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/nl&diff=34175&oldid=prev 2025-07-01T08:04:31Z

<p>Updating to match new version of source page</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 08:04, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l4">Line 4:</td> <td colspan="2" class="diff-lineno">Line 4:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Met onze iFrame-widget kunt u de Shopify-website koppelen aan SimplyBook.com, zodat uw klanten rechtstreeks vanaf de website kunnen boeken, zowel vanaf hun pc als vanaf hun mobiele apparaten. Deze oplossing maakt uw boekingsproces gemakkelijker en overzichtelijker.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Met onze iFrame-widget kunt u de Shopify-website koppelen aan SimplyBook.com, zodat uw klanten rechtstreeks vanaf de website kunnen boeken, zowel vanaf hun pc als vanaf hun mobiele apparaten. Deze oplossing maakt uw boekingsproces gemakkelijker en overzichtelijker.</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"></del></div></td><td colspan="2" class="diff-side-added"></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td></tr> <tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l31">Line 31:</td> <td colspan="2" class="diff-lineno">Line 30:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:8. Het resultaat is dat u meteen kunt zien hoe de boekingswidget eruitziet.</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:8. Het resultaat is dat u meteen kunt zien hoe de boekingswidget eruitziet.</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Shopify widget result.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:4. Click on &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Add content&lt;/span&gt; and select &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Custom HTML&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Select html.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:5. Navigate to your &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me account&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Settings&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Booking widgets settings&lt;/span&gt; -&gt; &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:6. Adjust the design to your taste and needs, &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;get widget code.&lt;/span&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;/div&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;div lang="en" dir="ltr" class="mw-content-ltr"&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:7. Copy the whole code from the popup and insert it to &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Save&lt;/span&gt; the changes</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Insert html to shopify side.png|border|center]]</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">&lt;br&gt;&lt;br&gt;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">:8. As the result you will see how the booking widget looks like right away.</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td></tr> </table>

FuzzyBot https://help.simplybook.me/index.php?title=Shopify/nl&diff=33527&oldid=prev 2025-07-01T07:44:43Z

<p>Created page with &quot;Shopify&quot;</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:44, 1 July 2025</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Line 8:</td> <td colspan="2" class="diff-lineno">Line 8:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>;Hoe instellen</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>&lt;div <del style="font-weight: bold; text-decoration: none;">lang="en" dir="ltr" </del>class="mw-<del style="font-weight: bold; text-decoration: none;">content</del>-<del style="font-weight: bold; text-decoration: none;">ltr</del>"&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>&lt;div class="mw-<ins style="font-weight: bold; text-decoration: none;">translate</ins>-<ins style="font-weight: bold; text-decoration: none;">fuzzy</ins>"&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:1. <del style="font-weight: bold; text-decoration: none;">Please navigate to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Online Store&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Themes&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Customize&lt;/span&gt; in <del style="font-weight: bold; text-decoration: none;">your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Shopify account.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:1. <ins style="font-weight: bold; text-decoration: none;">Ga naar </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Online Store&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Themes&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Customize&lt;/span&gt; in <ins style="font-weight: bold; text-decoration: none;">uw </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Shopify<ins style="font-weight: bold; text-decoration: none;">-</ins>account.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify customize theme.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:2. <del style="font-weight: bold; text-decoration: none;">Select the section you would like to edit on the left or add a new one</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:2. <ins style="font-weight: bold; text-decoration: none;">Selecteer de sectie die u wilt bewerken aan de linkerkant of voeg een nieuwe toe</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify add section.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify add section.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:3. <del style="font-weight: bold; text-decoration: none;">Choose to add </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Custom content.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:3. <ins style="font-weight: bold; text-decoration: none;">Kies voor </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Custom content<ins style="font-weight: bold; text-decoration: none;">&lt;/span&gt; toevoegen &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;</ins>.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify select custom content.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:4. <del style="font-weight: bold; text-decoration: none;">Click on </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Add content&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">and select </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Custom HTML&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:4. <ins style="font-weight: bold; text-decoration: none;">Klik op </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">'</ins>Add content<ins style="font-weight: bold; text-decoration: none;">'</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">(In </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">houd&lt;/span&gt; toevoegen) en selecteer &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;'</ins>Custom HTML<ins style="font-weight: bold; text-decoration: none;">'</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">(Aangepaste &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt;[[File:Select html.png|border|center]]</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Select html.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:5. <del style="font-weight: bold; text-decoration: none;">Navigate to your </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me account&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Settings&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Booking widgets settings&lt;/span&gt; -<del style="font-weight: bold; text-decoration: none;">&gt; </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:5. <ins style="font-weight: bold; text-decoration: none;">Ga naar uw </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;SimplyBook.me<ins style="font-weight: bold; text-decoration: none;">-</ins>account&lt;/span&gt; -<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Settings <ins style="font-weight: bold; text-decoration: none;">(Instellingen</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">) </ins>-<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;Booking widgets settings&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">(Instellingen voor boekingswidgets) </ins>-<ins style="font-weight: bold; text-decoration: none;">&amp;gt; </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;iFrame widget&lt;/span&gt;<ins style="font-weight: bold; text-decoration: none;">[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]iFrame-widget[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:6. <del style="font-weight: bold; text-decoration: none;">Adjust the design to your taste and needs, </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">get widget code</del>.&lt;/span&gt;</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:6. <ins style="font-weight: bold; text-decoration: none;">Pas het ontwerp aan uw smaak en behoeften aan en </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">kopieer de widgetcode</ins>.&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:7. <del style="font-weight: bold; text-decoration: none;">Copy the whole </del>code <del style="font-weight: bold; text-decoration: none;">from the popup and insert it to </del>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;HTML&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">field on </del>Shopify <del style="font-weight: bold; text-decoration: none;">side</del>. <del style="font-weight: bold; text-decoration: none;">Adjust </del>container <del style="font-weight: bold; text-decoration: none;">width if necessary</del>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<del style="font-weight: bold; text-decoration: none;">Save</del>&lt;/span&gt; <del style="font-weight: bold; text-decoration: none;">the changes</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:7. <ins style="font-weight: bold; text-decoration: none;">Kopieer de volledige </ins>code <ins style="font-weight: bold; text-decoration: none;">uit het pop-upvenster en plak deze in </ins>&lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">het </ins>HTML<ins style="font-weight: bold; text-decoration: none;">-veld</ins>&lt;/span&gt; <ins style="font-weight: bold; text-decoration: none;">aan de </ins>Shopify<ins style="font-weight: bold; text-decoration: none;">-kant</ins>. <ins style="font-weight: bold; text-decoration: none;">Pas indien nodig de breedte van de </ins>container <ins style="font-weight: bold; text-decoration: none;">aan</ins>. &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;<ins style="font-weight: bold; text-decoration: none;">Sla&lt;/span&gt; de wijzigingen &lt;span style="background-color:#d4f8e5; padding:5px; border-radius:5px;"&gt;op</ins>&lt;/span&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Insert html to shopify side.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>:8. <del style="font-weight: bold; text-decoration: none;">As the result you will see how the booking widget looks like right away</del>.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>:8. <ins style="font-weight: bold; text-decoration: none;">Het resultaat is dat u meteen kunt zien hoe de boekingswidget eruitziet</ins>.</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>[[File:Shopify widget result.png|border|center]]</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>&lt;/div&gt;</div></td></tr> </table>

Admin https://help.simplybook.me/index.php?title=Shopify/nl&diff=33521&oldid=prev 2025-07-01T07:44:39Z

<p>Created page with &quot;;Hoe instellen&quot;</p> <p><b>New page</b></p><div>&lt;languages/&gt;<br /> Als u Shopify gebruikt en de mogelijkheid om te boeken aan uw website wilt toevoegen, hebben wij de juiste oplossing voor u!<br /> <br /> <br /> Met onze iFrame-widget kunt u de Shopify-website koppelen aan SimplyBook.com, zodat uw klanten rechtstreeks vanaf de website kunnen boeken, zowel vanaf hun pc als vanaf hun mobiele apparaten. Deze oplossing maakt uw boekingsproces gemakkelijker en overzichtelijker.<br /> <br /> <br /> ;Hoe instellen<br /> <br /> &lt;div lang=&quot;en&quot; dir=&quot;ltr&quot; class=&quot;mw-content-ltr&quot;&gt;<br /> :1. Please navigate to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Online Store&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Themes&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Customize&lt;/span&gt; in your &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Shopify account.&lt;/span&gt;<br /> [[File:Shopify customize theme.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :2. Select the section you would like to edit on the left or add a new one.<br /> [[File:Shopify add section.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :3. Choose to add &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom content.&lt;/span&gt;<br /> [[File:Shopify select custom content.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :4. Click on &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Add content&lt;/span&gt; and select &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Custom HTML&lt;/span&gt;<br /> [[File:Select html.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :5. Navigate to your &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;SimplyBook.me account&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Settings&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Booking widgets settings&lt;/span&gt; -&gt; &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;iFrame widget&lt;/span&gt;<br /> [[File:Booking widget path redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/6/68/Booking_widget_path_redesigned.png]]<br /> &lt;br&gt;&lt;br&gt;<br /> :6. Adjust the design to your taste and needs, &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;get widget code.&lt;/span&gt;<br /> [[File:Copy widget code redesigned.png|1200px|border|center|link=https://help.simplybook.me/images/b/b4/Copy_widget_code_redesigned.png]]<br /> &lt;br&gt;&lt;br&gt;<br /> :7. Copy the whole code from the popup and insert it to &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;HTML&lt;/span&gt; field on Shopify side. Adjust container width if necessary. &lt;span style=&quot;background-color:#d4f8e5; padding:5px; border-radius:5px;&quot;&gt;Save&lt;/span&gt; the changes<br /> [[File:Insert html to shopify side.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;<br /> :8. As the result you will see how the booking widget looks like right away.<br /> [[File:Shopify widget result.png|border|center]]<br /> &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;/div&gt;</div>

Admin