<turbo-stream action="update" target="modal"><template>

<div class="container-full mx-auto max-w-screen-lg">
  <div class="bg-white max-h-screen overflow-auto rounded-lg shadow-xl">
    <div class="bg-white border-b border-grey-light relative bg-grey-light border-grey-mid text-center py-4">
  <span class="text-xl font-bold">
    Intégrer dans un site
    
  </span>
    <button class="absolute right-0 top-0 bottom-0 h-full px-6 transition duration-100 hover:bg-grey-light rounded-tr-lg js-modal-close flex items-center" data-prev-state-url="" onclick="">
      <i class="fas fa-times text-2xl"></i>
    </button>
</div>

    <div class="pt-6 pb-8 px-8">
  <div class="mb-6 text-lg">
    <span class="font-semibold block mb-2">Intégrez cette dictée dans votre site internet d'un simple copier-coller :</span>
    <div class="mt-4">
      <span class="w-8 h-8 rounded-full bg-grey-light text-black font-bold inline-block text-center leading-8 mr-3">1</span><a target="_blank" class="text-success font-semibold" href="/embed/WDRkbzU0bkan/preview">Prévisualisez l&#39;intégration de cette dictée</a>.</li>
    </div>
    <div class="mt-4">
      <span class="w-8 h-8 rounded-full bg-grey-light text-black font-bold inline-block text-center leading-8 mr-3">2</span>Copiez-le code HTML ci-dessous en cliquant sur le bouton « <div class="inline-block"><div data-react-class="CopyText" data-react-props="{&quot;value&quot;:&quot;\u003c!-- Dictaly widget --\u003e\n\u003cdiv id=&#39;widget-container&#39;\u003e\u003ca target=&#39;_blank&#39; href=&#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;\u003eAccéder à la dictée en ligne « La Goualeuse » sur Dictaly\u003c/a\u003e\u003c/div\u003e\n\u003cscript\u003e\n(function (w,d,s,o,f,js,fjs) {\nw[&#39;Dictaly&#39;]=o;w[o] = function () { (w[o].q = w[o].q || []).push(arguments) };\njs = d.createElement(s), fjs = d.getElementsByTagName(s)[0];\njs.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);\n}(window, document, &#39;script&#39;, &#39;pw&#39;, &#39;https://cdn.dictaly.com/widget.js&#39;));\npw(&#39;init&#39;, &#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;);\n\u003c/script\u003e\n\u003c!-- /Dictaly widget --\u003e&quot;,&quot;text&quot;:&quot;Copier le code d&#39;intégration&quot;,&quot;class&quot;:&quot;js-copy-to-clipboard text-success font-semibold cursor-pointer&quot;}" data-react-cache-id="CopyText-0"></div></div> ».</li>
    </div>
  </div>
  <div class="border border-grey-mid rounded-lg">
  <div data-react-class="CodeEditor" data-react-props="{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;readOnly&quot;:true,&quot;code&quot;:&quot;\u003c!-- Dictaly widget --\u003e\n\u003cdiv id=&#39;widget-container&#39;\u003e\u003ca target=&#39;_blank&#39; href=&#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;\u003eAccéder à la dictée en ligne « La Goualeuse » sur Dictaly\u003c/a\u003e\u003c/div\u003e\n\u003cscript\u003e\n(function (w,d,s,o,f,js,fjs) {\nw[&#39;Dictaly&#39;]=o;w[o] = function () { (w[o].q = w[o].q || []).push(arguments) };\njs = d.createElement(s), fjs = d.getElementsByTagName(s)[0];\njs.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);\n}(window, document, &#39;script&#39;, &#39;pw&#39;, &#39;https://cdn.dictaly.com/widget.js&#39;));\npw(&#39;init&#39;, &#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;);\n\u003c/script\u003e\n\u003c!-- /Dictaly widget --\u003e&quot;}" data-react-cache-id="CodeEditor-0"></div>
</div>


  





  <button type="button" class="btn inline-block rounded-full transition duration-100 ease-in-out hover:shadow-lg text-lg relative mt-6 bg-success text-white px-4 py-3 font-semibold w-full text-center">
    
    <div data-react-class="CopyText" data-react-props="{&quot;value&quot;:&quot;\u003c!-- Dictaly widget --\u003e\n\u003cdiv id=&#39;widget-container&#39;\u003e\u003ca target=&#39;_blank&#39; href=&#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;\u003eAccéder à la dictée en ligne « La Goualeuse » sur Dictaly\u003c/a\u003e\u003c/div\u003e\n\u003cscript\u003e\n(function (w,d,s,o,f,js,fjs) {\nw[&#39;Dictaly&#39;]=o;w[o] = function () { (w[o].q = w[o].q || []).push(arguments) };\njs = d.createElement(s), fjs = d.getElementsByTagName(s)[0];\njs.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);\n}(window, document, &#39;script&#39;, &#39;pw&#39;, &#39;https://cdn.dictaly.com/widget.js&#39;));\npw(&#39;init&#39;, &#39;https://www.dictaly.com/embed/WDRkbzU0bkan&#39;);\n\u003c/script\u003e\n\u003c!-- /Dictaly widget --\u003e&quot;,&quot;text&quot;:&quot;\u003ci class=&#39;fas fa-copy mr-2&#39;\u003e\u003c/i\u003e Copier le code d&#39;intégration&quot;,&quot;class&quot;:&quot;js-copy-to-clipboard absolute inset-0 flex items-center justify-center&quot;}" data-react-cache-id="CopyText-0"></div> 

</button>
  <div class="mt-8 text-lg">
    <div class="mt-4">
      <span class="w-8 h-8 rounded-full bg-grey-light text-black font-bold inline-block text-center leading-8 mr-3">3</span>Collez-le dans une balise HTML sur une page de votre site internet (Wordpress, Drupal ou autre CMS).</li>
    </div>
  </div>

  





  <a class="btn inline-block rounded-full transition duration-100 ease-in-out hover:shadow-lg text-lg relative mt-6 bg-white text-black shadow border border-grey-light px-4 py-3 font-semibold w-full text-center" target="_blank" href="https://dictaly.notion.site/Comment-int-grer-une-dict-e-sur-mon-site-d1b6c8a9a8314c7980b4b18a6aef8a93">
    
    <span class="w-5 inline-block mr-1">⛑️</span> Besoin d'aide ?

</a></div>

  </div>
</div>
</template></turbo-stream><turbo-stream action="open_modal"><template></template></turbo-stream>


