← All platforms

Ends up

Into the HTML of every response, rewritten as it passes through Cloudflare.

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_btn_facebook"></a>' +
                 '<a class="ats_btn_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.