← All platforms

1. 01

   Create a Snippet

   In the dashboard: Rules → Snippets → Create. Snippets run on the edge and can rewrite HTML without your origin server knowing anything about it.

2. 02

   Rewrite the HTML on its way through

   HTMLRewriter streams the response, so this adds no meaningful latency and never buffers the page.

   javascript

   export default {
     async fetch(request) {
       const response = await fetch(request);
   
       // Only rewrite HTML; images and JSON pass straight through.
       if (!response.headers.get('content-type')?.includes('text/html')) {
         return response;
       }
   
       return new HTMLRewriter()
         .on('article', {
           element(el) {
             el.append(
               '<div class="ats_kit ats_kit_size_32">' +
                 '<a class="ats_button_facebook"></a>' +
                 '<a class="ats_button_x"></a>' +
                 '<a class="ats_dd"></a>' +
               '</div>',
               { html: true }
             );
           },
         })
         .on('body', {
           element(el) {
             el.append('<script async src="//static.addtosite.com/widget.js"></' + 'script>', { html: true });
           },
         })
         .transform(response);
     },
   };

3. 03

   Limit it to the pages that need it

   Give the Snippet a rule like `http.request.uri.path matches "^/blog/"` so it never touches your checkout, your admin, or your API.